backbone.js - 子视图内的主干渲染子视图

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.$elandthis.$(".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()使用另一个视图删除和替换元素。