绑定集合更改以查看渲染

Question

尽管 StackOverflow 和其他地方有很多关于同一主题的问题/答案，但我仍然不明白如何继续。我想更改我的收藏以在我的视图中触发渲染功能。 View 有一个集合，而不是一个模型——所以我看到的许多 model.bind 示例都不适用。显然 collection.bind 不是合法的绑定。这是我的视图代码。我应该在初始化中添加什么，以便在orderedPrefs（集合）发生更改时调用视图的渲染函数？

headerView = Backbone.View.extend({

        el: $('#' + targetdiv),
        collection: orderedPrefs,
        events: {
            "click .scheduleheader": "clicked"                               // dependency here on scheduler.js class naming .scheduleheader

        },
        initialize: function () {
            _.bindAll(this, "render");

        },
        render: function () {
            alert('render!!');
        },

..... .....

Answer 1

这些应该在初始化函数中起作用：

this.collection.on("add", this.render);
this.collection.on("remove", this.render);
this.collection.on("reset", this.render);

如果他们不这样做，则附加到视图的集合有问题。您不应使用全局“orderedPrefs”。

主干文档状态：

创建新视图时，您传递的选项将作为 this.options 附加到视图，以供将来参考。有几个特殊选项，如果通过，将直接附加到视图：模型、集合、el、id、className、tagName 和属性。

当实例化你的视图时，你需要像这样传递集合：

new headerView({ collection: orderedPrefs });

如果你想跟踪集合模型的变化，你应该在不同的视图中进行：

var ModelView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, "render");
        this.render();
        this.model.on("change",this.render);
    },
    render: function() {
        $(this.el).html("model view markup"); // you should use templating
        return this;
    }
});

var headerView = Backbone.View.extend({
    el: $('#' + targetdiv),
    initialize: function () {
        _.bindAll(this, "render");
        this.collection.on("add", this.render);
        this.collection.on("remove", this.render);
        this.collection.on("reset", this.render);
    },
    render: function () {
        var self = this;
        this.collection.each(function(collectionModel){
            var view = new ModelView({ model : collectionModel });
            $(self.el).append(view.el);
        });
    }
});

Answer 2

您可以使用collection.on 绑定到“添加”和“删除”事件。有关使用示例，请参阅 documentation under Add。

this.collection.on("add", this.render);

如果您使用的是 Backbone 0.9.0 或更高版本，那么您可以在同一语句中绑定多个事件：

this.collection.on("add remove", this.render);

另请注意，“绑定”应该与“开启”相同：

为了清楚起见，bind 和 unbind 已重命名为 on 和 off，遵循 jQuery 的引导。旧名称也仍受支持。