需要帮助理解骨干嵌套意见的基础知识 [英] Need help understanding the basics of nested views in backbone
问题描述
我已经做了一堆阅读有关Backbone.js的嵌套的意见，我理解它的良好的数额，但有一件事是一直困扰着我，这...
I've been doing a bunch of reading about nested views in backbone.js and I understand a good amount of it, but one thing that is still puzzling me is this...
如果我的应用程序都有一个包含子视图像页面导航，页脚等不使用的应用程序的过程中改变外壳来看，我需要使每一个路由壳还是我做一些在视图检查，看它是否已经存在的？
If my application has a shell view that contains sub-views like page navigation, a footer, etc. that don't change in the course of using the application, do I need to render the shell for every route or do I do some kind of checking in the view to see if it already exists?
这似乎这样对我，如果有人没有在应用程序中向前移动之前热播的家的路线。
It would seem so to me if someone didn't hit the "home" route before moving forward in the app.
我还没有发现任何有关这是很有帮助的在我的google搜索，所以任何的建议是AP preciated。
I haven't found anything helpful about this in my googling, so any advice is appreciated.
谢谢！
推荐答案
由于您的壳或布局的看法永远不会改变，你应该在应用程序启动呈现它（触发任何路由之前），并呈现进一步意见<强>到的布局视图。
Since your "shell" or "layout" view never changes, you should render it upon application startup (before triggering any routes), and render further views into the layout view.
假设你的布局看起来是这样的：
Let's say your layout looked something like this:
<body>
<section id="layout">
<section id="header"></section>
<section id="container"></section>
<section id="footer"></section>
</section>
</body>
您布局视图可能会是这个样子：
Your layout view might look something like this:
var LayoutView = Backbone.View.extend({
el:"#layout",
render: function() {
this.$("#header").html((this.header = new HeaderView()).render().el);
this.$("#footer").html((this.footer = new FooterView()).render().el);
return this;
},
renderChild: function(view) {
if(this.child)
this.child.remove();
this.$("#container").html((this.child = view).render().el);
}
});
您会再安装在应用程序启动的布局：
You would then setup the layout upon application startup:
var layout = new LayoutView().render();
var router = new AppRouter({layout:layout});
Backbone.history.start();
和在你的路由器code：
And in your router code:
var AppRouter = Backbone.Router.extend({
initialize: function(options) {
this.layout = options.layout;
},
home: function() {
this.layout.renderChild(new HomeView());
},
other: function() {
this.layout.renderChild(new OtherView());
}
});
有多种方式对皮肤这个特定猫，但是这是我通常处理的方式。这使您可以控制（ renderChild ）呈现你的顶级的意见单点，并确保在previous元素是新的呈现之前删除 D。这也可能派上用场，如果您需要更改视图的呈现方式。
There are a number of ways to skin this particular cat, but this is the way I usually handle it. This gives you a single point of control (renderChild) for rendering your "top-level" views, and ensures the the previous element is removed before new one is rendered. This might also come in handy if you ever need to change the way views are rendered.
这篇关于需要帮助理解骨干嵌套意见的基础知识的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
