子视图内的主干渲染子视图

Question

我有一个渲染子视图的人员视图。渲染人物视图和人物视图，但不渲染子视图。调试显示它进入子视图但未呈现。

人民观：

渲染：函数（）{ $("#page").html(compiledTemplate); _.each(personViewPointers, function (item) { $(".people-collection").append(item.render().el) }); 返回这个 }

personview 呈现子视图。渲染正常，但不渲染子视图。

渲染：函数（）{ 变量数据 = { 模型：this.model， _:_ }; this.$el.html(compiledTemplate(data)) this.addAllSubViews() var self = 这个 _.each（子视图，功能（项目）{ self.$el.append(item.render().el) }); 返回这个 }

不渲染的子视图。

渲染：函数（）{ this.$el.html(compiledTemplate) 返回这个 }

Answer 1

提示

您正在使用 $("#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'});

但是一旦您使用了new PersonView({el: '#page'})，您就不能真正将“#page”用于其他任何事情，视图已将事件等绑定到元素。所以最好把它作为一个元素添加：

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

这允许删除 pv.remove() 并将元素替换为另一个视图。