我有一个嵌套的视图设置,它可以深入到我的应用程序中。有一堆方法我可以想到初始化,渲染和附加子视图,但我想知道常见的做法是什么。
下面是我想到的几个:
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顺序。视图是在早期初始化的,所以在渲染函数中没有那么多事情要一次完成。
缺点:您被迫重新委托costly (),这可能很昂贵?父视图的渲染函数被需要进行的所有子视图渲染弄得乱七八糟?您不能设置元素的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);
}
优点:你不必重新委托事件。您不需要只包含空占位符的模板,并且您的tagName将重新由视图定义。
缺点:现在你必须确保以正确的顺序追加内容。父视图的渲染仍然受到子视图渲染的影响。
使用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
中的所有子视图呈现逻辑
https://stackoverflow.com/questions/9271507
复制相似问题