Question

这里的完整代码...... http://pastebin.com/EEnm8vi3

第378行未将这些部分插入当前视图。 正确地将剖面模型传递给方法。除了插入子渲染视图外，其他所有内容都按预期工作。

我想知道为什么$（this.el）是空的，因此不允许追加。尝试使用像$（'＃sections'）这样的直接选择器也不起作用。

从上面的pastbin链接重复的相关代码：（addOne方法）

SCC.Views.SectionView = Backbone.View.extend({
    tagName: "div",
    className: "section",
    initialize: function(){
        _.bindAll(this, 'render');
        this.template = _.template($('#section-tmpl').html());
    },
    render: function() {
        console.log($(this.el));
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});



SCC.Views.SectionsView = Backbone.View.extend({
    tagName: "div",
    id: "sections",
    className: "sections",
    initialize: function(){
        _.bindAll(this, 'render');
         //SCC.Sections.bind('add',   this.addOne, this);
         SCC.Sections.bind('reset', this.addAll, this);
         SCC.Sections.bind('all',   this.render, this);
    },
    render: function() {
        $(this.el).html("<p>rendered</p>");
        return this;
    },
    addOne: function(section) {
        var view = new SCC.Views.SectionView({model: section});
        $(this.el).append(view.render().el);
    },
    addAll: function() {
        this.collection.each(this.addOne);
    }

});



SCC.Sections = new SCC.Collections.Sections();
SCC.SectionsView = new SCC.Views.SectionsView({collection:SCC.Sections});
SCC.Sections.reset(window.SectionData);
$('#main').append(SCC.SectionsView.render().el);

Answer 1

我自己遇到了这个问题，所以我会把这个答案留给那里的其他人：

将this.render绑定到'all'时，如@lukemh所做的那样：

SCC.Sections.bind('all', this.render, this);

每次在模型/集合中触发事件时，您都会有效地说，重新渲染视图。当您在呈现方法中使用 .html（）时，您还将覆盖可能已经 .append（）的所有子视图通过 addOne 功能编辑它。

如果将$（this.el）.html（）调用移动到初始化视图，问题就解决了。你仍然可以将渲染绑定到'all'，但要确保你只是重新渲染它的一部分，否则你将再次覆盖子视图。

渲染子视图时骨干视图中没有existant $（this.el）

1 个答案: