132
我有一个嵌套的视图设置，它可以在我的应用程序中获得一些深度。有很多方法可以考虑初始化，渲染和附加子视图，但我不知道常用的做法是什么。如何在Backbone.js中渲染和附加子视图
这里有几个我认为：
initialize : function() {
this.subView1 = new Subview({options});
this.subView2 = new Subview({options});
},
render : function() {
this.$el.html(this.template());
this.subView1.setElement('.some-el').render();
this.subView2.setElement('.some-el').render();
}
优点：您不必担心与附加保持正确的DOM顺序。视图在初始化时就被初始化了，所以在渲染函数中不需要一次完成所有的事情。
缺点：您被迫重新委托Events（），这可能是昂贵的？父视图的渲染函数与需要发生的所有子视图渲染混淆？您无法设置元素的tagName，因此模板需要维护正确的tagNames。
另一种方式：
initialize : function() {
},
render : function() {
this.$el.empty();
this.subView1 = new Subview({options});
this.subView2 = new Subview({options});
this.$el.append(this.subView1.render().el, this.subView2.render().el);
}
优点：您不必重新授权事件。您不需要只包含空白占位符的模板，并且您的标记名已重新由视图定义。
缺点：您现在必须确保以正确的顺序追加内容。父视图的渲染仍然被子视图渲染混乱。
随着onRender事件：
initialize : function() {
this.on('render', this.onRender);
this.subView1 = new Subview({options});
this.subView2 = new Subview({options});
},
render : function() {
this.$el.html(this.template);
//other stuff
return this.trigger('render');
},
onRender : function() {
this.subView1.setElement('.some-el').render();
this.subView2.setElement('.some-el').render();
}
优点：的子视图逻辑现在从视图的render()方法分离。
随着onRender事件：
initialize : function() {
this.on('render', this.onRender);
},
render : function() {
this.$el.html(this.template);
//other stuff
return this.trigger('render');
},
onRender : function() {
this.subView1 = new Subview();
this.subView2 = new Subview();
this.subView1.setElement('.some-el').render();
this.subView2.setElement('.some-el').render();
}
我有种混合并在所有的这些例子（关于很抱歉），但什么是你将保持者或匹配一堆不同的做法加？你会怎么做？
总结的做法：在initialize或render
- 实例化的子视图？
- 执行
render或onRender中的所有子视图渲染逻辑？ - 使用
setElement或append/appendTo？
我会小心新的没有删除，你有内存泄漏在那里。 – vimdude 2012-02-14 04:14:48
不用担心，我有一个'close'方法和'onClose'来清理孩子，但我只是对如何实例化和渲染它们而感到好奇。 – 2012-02-14 07:33:32
@abdelsaid：在JavaScript中，GC处理内存的重新分配。 JS中的'delete'与C++中的'delete'不一样。如果你问我，这是一个非常糟糕的关键字。 – 2012-07-31 21:18:12