Backbone.js 主干渲染子视图内部子视图

我有一个peopleview，它呈现PersonView，它呈现子视图。将呈现Peopleview和PersonView，但不呈现子视图。调试显示它转到子视图，但未呈现

人民观点：

render:function () { $("#page").html(compiledTemplate); _.each(personViewPointers, function (item) { $(".people-collection").append(item.render().el) }); return this } 渲染：函数（）{ $（“#page”）.html（compiledTemplate）； _.每个（PersonViewPoints、函数（项）{ $（“.people集合”）.append（item.render（）.el） }); 还这个 } personview渲染子视图。渲染OK，但不渲染子视图

render:function () { var data = { model:this.model, _:_ }; this.$el.html(compiledTemplate(data)) this.addAllSubViews() var self = this _.each(subviews, function (item) { self.$el.append(item.render().el) }); return this } 渲染：函数（）{ 风险值数据={ 模特儿：这个模特儿， _:_ }; 此.el.html（compiledTemplate（数据）） this.addAllSubViews（） var self=这个 _.每个（子视图、功能（项）{ self.$el.append（item.render（）.el） }); 还这个 } 不渲染的子视图

render:function () { this.$el.html(compiledTemplate) return this } 渲染：函数（）{ 此.el.html（compiledTemplate） 还这个 } 提示

您正在使用

$（“#page”）

和

$（“.people collection”）

将personview直接耦合到DOM

我建议改为使用

this.$el

和

this.$（“.people collection”）

：

render:function () {
    this.$el.html(compiledTemplate);
    _.each(personViewPointers, function (item) {
        this.$(".people-collection").append(item.render().el)
    }, this);
    return this
}

并在构造函数中传递#page元素：

var pv = new PersonView({el: '#page'});

但是，一旦您使用了

newpersonview（{el:'#page'}）

您就不能真正将'#page'用于其他任何内容，视图将事件等绑定到元素。因此，最好将其添加为一个元素：

var pv = new PersonView();
$('#page').empty();
$('#page').append(pv.render().this);

---

它允许删除

pv.remove（）

并用另一个视图替换元素。

子视图的渲染是否实际调用？你试过在上面设置断点吗？是的。我制作了一个简单的模板来测试和控制台。log（$（this.el））在此之后。$el.html（compiledTemplate）给出“test”。这实际上被调用了两次，有两个子视图。

subview

来自哪里？如何

personViewPointers

？而且不应该

$（“#page”）.html（compiledTemplate）

be

$（“#page”）.html（compiledTemplate（））
compiledTemplate
可能是一个返回一些HTML而不是HTML本身的函数。子视图是从personview的集合中添加的：this.collection.each（this.addOne）。。。子视图[model.id]=新的personbillableitemview（{model:model}）。和PersonViewPointer以相同的方式从PeopleView集合中添加。compiledTemplate随AMD提供了文本插件：定义（['Appregistry'，'collections/admin/peopleCollection'，'views/admin/personView'，'text！templates/admin/people/people.html'，'models/admin/PersonTomodel']，函数（Appregistry，peopleCollection，personView，peopleTemplate，PersonTomodel）。我尝试过：$（“#页面”）.html（compiledTemplate（））不起作用我尝试了以下操作：u.each（子视图，函数（项）{this.$el.append（item.render（）.el）this.$el.append（“rendered”）}，this）；在personView上。this“rendered”现在渲染。这些子视图仍然没有渲染，有什么想法吗？进一步了解了这一点。问题似乎是这些子视图指针。当渲染带有2个子视图的第一人称视图时，一切似乎都正常。没有任何子视图的下一人称视图将删除所有子视图，包括以前添加的子视图。您当前的实现不会影响es使用PersonView的多个实例。我在回答中添加了“将其添加为元素”部分。感谢您的回答。通过简短的测试，所有绑定都是从上一个模型绑定的，因此需要研究更多将el元素传递到新视图的方法。我使用了“this”，就像您成功使用的一样，它似乎可以工作（呈现到页面），但将所有这些ViewPointer呈现给每个personviews，因此我添加了检查：u.each（子视图，函数（项）{if（item.model.get（“person”）.id==self.model.id）{self.$el.find（“.section content”）.append（item.render（）.el）}）；这感觉像是黑客，需要找到更好的方法。不要对子视图使用全局变量（personViewPointers），而是使用实例变量
This.personViewPointers
，您将在initialize方法中创建它：
This.personViewPointers=[]；