javascript - 如果服务器上的集合发生更改，如何仅更新主干 View ？

Question

我有一个页面，我要轮询通知。如果有任何通知，我会填写 Backbone.js查看通知。目前，我每 2 秒轮询一次通知，并且每两秒重新填充一次 View 。

function updateNotificationView(ticketId) {
    var ticketNotificationCollection = new TicketNotificationCollection([], {id: ticketId});
    $.when(ticketNotificationCollection.fetch()).done(function() {
        var notificationView = new NotificationsView({collection: ticketNotificationCollection});
        $('#ticket-notifications-area').html(notificationView.render().el);
    });
}
window.notificationsIntervalId = setInterval(function() {updateNotificationView(ticketId);}, 2000);

我现在只想在 Backbone 获取的集合发生更改时填充 View ，但我不知道如何做到这一点？

有人可以给我一个提示，告诉我如何只能填充集合更改的 View 吗？欢迎所有提示!

[编辑]我现在将函数更改为:

function updateNotificationView(ticketId) {
    var ticketNotificationCollection = new TicketNotificationCollection([], {id: ticketId});
    var notificationsView = new NotificationsView();
    notificationsView.listenTo(ticketNotificationCollection, 'change', notificationsView.render);
    notificationsView.listenTo(ticketNotificationCollection, 'add', notificationsView.render);
    ticketNotificationCollection.fetch();
}

我将NotificationsView更改为:

var NotificationsView = Backbone.View.extend({
    addNotificationView: function(notification) {
        var singleNotificationView = new SingleNotificationView({model: notification});
        this.$el.append(singleNotificationView.render().el);
    },
    render: function() {
        console.log('ITS BEING CALLED!!');
        this.collection.each(this.addNotificationView, this);
        $('#ticket-notifications-area').html(this);
    }
});

我现在得到了“它正在被调用!!”每隔两秒在控制台中，还会报错:“未捕获类型错误:无法读取未定义的属性“each”。”。我明白为什么会出现这个错误；这是因为集合从未真正插入到 View 中。但是我不明白如何解决这个问题..还有更多提示吗？

Answer 1

我假设您正在集合中获取模型以响应 JSON 格式的请求。

方法一:

您只需将集合设置为 JSON 即可。并将集合绑定(bind)到 change 事件。如果集合发生任何变化，将会触发回调函数。在回调函数中，您可以渲染 View 。

注意:仅当集合中包含的模型发生任何更改时，才会触发集合上的change事件。

例如

someCollection.on('change', function(){
    someView.render()
  });

方法2:

您可以使用 Backbone 的 listenTo方法，呈现集合更改的 View 。

someView.listenTo(someCollection, 'change', someView.render);

希望对你有帮助...