jquery - 绑定(bind)集合更改以查看渲染

Question

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

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);

如果没有，则说明附加到 View 的集合存在问题。您不应使用全局“orderedPrefs”。

主干文档状态:

创建新 View 时，您传递的选项将作为 this.options 附加到 View ，以供将来引用。有几个特殊选项，如果通过，将直接附加到 View :model、collection、el、id、className、tagName 和 attribute。

实例化 View 时，您需要像这样传递集合:

new headerView({ collection: orderedPrefs });

如果您想跟踪集合模型中的更改，您应该在不同的 View 中执行此操作:

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);
        });
    }
});