Question

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

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

这些应该在initialize函数中起作用：

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

如果他们不这样做，那么附加到视图的集合就会出现问题。您不应该使用全局“orderedPrefs”。

Backbone docs陈述：

创建新视图时，您传递的选项将作为this.options附加到视图中，以供将来参考。有几个特殊选项，如果传递，将直接附加到视图：model，collection，el，id，className，tagName和attributes。

在实例化视图时，您需要传递这样的集合：

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”应与“on”相同：

为了清晰起见，
绑定和取消绑定已经重命名为jQuery的引导。旧名称仍然受到支持。

绑定集合更改为视图呈现

2 个答案: