javascript 主干显示/隐藏渲染视图最佳实践
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9399266/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone showing/hiding rendered views best practices
提问by Brandon
New to using Backbone and have a very simple application. Basically there are Clients
and ClientItems
. I have a view to show all Clients and if you click on a Client you get taken to their ClientItems. Going to this ClientItems view should just hide the Clients view and going back to Clients should hide ClientItems. Now, in my render()
function for each view, it is going through the collections and dynamically adding stuff to the page. When I go back and forth between the two (using the back button) I don't really need to fully render again as all the data is there in the page, just hidden. Where should this logic go? Right now I have it in the render()
function but it feels sloppy, what is the preferred way of handling this?
刚开始使用 Backbone 并且有一个非常简单的应用程序。基本上有Clients
和ClientItems
。我有一个视图来显示所有的客户,如果你点击一个客户,你就会被带到他们的 ClientItems。转到这个 ClientItems 视图应该只隐藏 Clients 视图,返回 Clients 应该隐藏 ClientItems。现在,在我render()
针对每个视图的函数中,它正在遍历集合并向页面动态添加内容。当我在两者之间来回(使用后退按钮)时,我真的不需要再次完全渲染,因为所有数据都在页面中,只是隐藏了。这个逻辑应该去哪里?现在我在render()
函数中拥有它,但感觉很草率,处理这个问题的首选方法是什么?
回答by
We are using a global variable App
with several common function used across application:
我们正在使用一个全局变量,App
其中包含多个跨应用程序使用的通用函数:
var App = {
initialize : function() {
App.views = {
clientView : new ClientsView(),
clientItemView : new ClientsItemsView()
}
},
showView: function(view){
if(App.views.current != undefined){
$(App.views.current.el).hide();
}
App.views.current = view;
$(App.views.current.el).show();
},
...
}
And then I use this App
from other parts of application:
然后我App
从应用程序的其他部分使用它:
App.showView(App.views.clientView);
回答by Christian Willman
IntoTheVoid's solution is good – it's nice to have a single place to hide/show views. But how do you activate the logic?
IntoTheVoid 的解决方案很好——有一个地方可以隐藏/显示视图。但是如何激活逻辑呢?
In my experience, routers are the best place for this. When a route changes and the appropriate function is called, you should update the active, visible view(s).
根据我的经验,路由器是最好的地方。当路由更改并调用适当的函数时,您应该更新活动的可见视图。
What if you need multiple views to be visible at once? If you have a primary view that always changes when the route changes, and multiple subsidiary sticky views, you need not worry. But if it's more complex than that, think of creating a ComboView that neatly packages all the relevant views into one containing el
node. That way the above logic still works, and your router functions are not littered with logic for managing what views are visible at the moment.
如果您需要同时显示多个视图怎么办?如果您有一个随着路线变化而始终变化的主视图,以及多个附属粘性视图,您不必担心。但如果它比这更复杂,请考虑创建一个 ComboView,将所有相关视图整齐地打包到一个包含el
节点中。这样,上述逻辑仍然有效,并且您的路由器功能不会充斥着用于管理当前可见的视图的逻辑。