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

Question

我有一个人物视图，用于呈现呈现子视图的personViews。 Peopleview是渲染和人物视图，但子视图不是。调试显示它进入子视图但它没有渲染。

peopleview：

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

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

    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
    }

不呈现的子视图。

    render:function () {
        this.$el.html(compiledTemplate)
        return this
    }

Answer 1

提示

您正在使用$("#page")和$(".people-collection")将人物视图直接与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'用于其他任何事情，View已将事件等绑定到元素上。所以将它添加为元素会更好：

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

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