如何检查侧栏视图是否已在骨干中呈现？ [英] How to check if sidebar view has already been rendered in backbone?
问题描述
通常，用户通过主页进入网站，然后在那里渲染侧边栏视图。接下来，用户单击链接，路由器将呈现另一个视图并替换原始内容视图。侧边栏视图不会重新渲染。
Generally, the user enters the website through the home page and then I render the sidebar view there. Next, the user clicks a link and the router renders another view and replaces the original content view. The sidebar view is not re-rendered.
当用户在子页面上单击刷新时，不会呈现侧栏。
When the user clicks refresh while on a sub-page, the sidebar is not rendered.
如何检查视图是否存在且是否已呈现？
How do I check whether a view exists and has been rendered?
推荐答案
分担责任并坚持下去。不要将侧边栏渲染放在主页视图的手中。
Split the responsibilities and stick to it. Don't put the sidebar rendering into the hands of the home page view.
您可以使用布局视图处理渲染内容，标题，页脚和侧栏。然后，当用户导航到另一个页面时，路由器只在布局视图上调用类似 setContent（view）的内容，这样可以确保侧边栏（以及其他所有内容）都已呈现在呈现内容之前。
You could have a layout view which handles rendering the content, header, footer and sidebar. Then, when the user navigate to another page, the router just calls something like setContent(view) on the layout view, which makes sure the sidebar (and everything else) was rendered before rendering the content.
假设这个模板：
<body>
<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
</body>
布局视图可以很简单：
var Layout = Backbone.View.extend({
el: 'body' // just for the simple example, let's put this as the body.
// This avoids repeating selector strings everywhere in the view code.
// If you change a class name in the template, change it only once here.
regions: {
header: '.header',
content: '.content',
sidebar: '.sidebar'
},
initialize: function(options) {
var regions = this.regions;
// I like to "namespace" my sub-views into an object.
// That way, you still can access them by name, but you can also
// loop on the sub-views.
this.views = {
sidebar: new SideBar({ el: regions.sidebar }),
header: new Header({ el: regions.header }),
};
this.$content = this.$(regions.content);
},
render: function() {
_.invoke(this.views, 'render');
return this;
},
/**
* Set the content to a view.
* @param {Backbone.View} view to replace the content with.
*/
setContent: function(view) {
var views = this.views,
content = views.content;
if (content !== view) {
if (content) content.remove();
views.content = content = view;
this.$content.html(content.render().el);
}
},
});
路由器可以懒洋洋地创建视图：
And the router could lazily create views:
var AppRouter = Backbone.Router.extend({
routes: {
'*otherwise': 'homepage',
'specific/:id': 'specificPage'
},
initialize: function() {
this.layout = new Layout();
this.layout.render();
this.views = {};
},
homepage: function() {
// These local variables improve minification and readability.
var views = this.views,
homepage = views.homepage;
if (!homepage) {
views.homepage = homepage = new HomePage();
}
this.layout.setContent(homepage);
},
specificPage: function(id){
var views = this.views,
specific = views.specific;
if (!specific){
views.specific = specific = new HomePage();
}
specific.setId(id); // hypothetical logic
this.layout.setContent(specific);
}
});
这篇关于如何检查侧栏视图是否已在骨干中呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
