javascript - 模拟套接字事件如何使用接收到的模型数据更新相关 View ？

Question

我正在尝试模拟多个套接字响应，监听 View 中的每个响应并更新模型，但现在我正在设法使用相同的数据更新每个 View 。任何人都可以建议我需要做什么才能更新与数据相关的 View ，现在我很困惑这一切是如何工作的，如果响应中存在唯一的数据，我应该在 View 或模型等？

示例 JS

    function outputData(id, name) {
    return {
        id: id,
        name: name
    }
};

var View = Backbone.View.extend({

    className: 'view',

    template: Handlebars.compile( $('.tmpl-view').html() ),

    initialize: function() {
        this.listenTo(Backbone.Events, 'data:recieved', function(response) {
            // Check if this model data is related to this view then set?
            this.model.set(response);
            this.render();
        }.bind(this), this)
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

var viewOne = new View({
    model: new Backbone.Model()
});

var viewTwo = new View({
    model: new Backbone.Model()
});

$('body').append(
    viewOne.render().el,
    viewTwo.render().el
);

Backbone.Events.trigger('data:recieved', outputData(1, 'Data for viewOne'));

setTimeout(function() {
    Backbone.Events.trigger('data:recieved', outputData(2, 'Data for viewTwo'));
}, 400);

JS fiddle http://jsfiddle.net/9kf9qvdg/

Answer 1

我会采取稍微不同的方法。您的 View 应该只监听它所支持的一种模型的更改。这样每个 View 就不需要解析每个套接字消息:

initialize: function() {
    this.listenTo(this.model, 'change', this.render);
}

相反，您将拥有单独的逻辑，可以在收到数据时适本地处理模型更新。这可能看起来像:

function updateData(id, msg) {
    var data = outputData(id, msg);
    var modelToUpdate = collection.findWhere({id: data.id});
    if(modelToUpdate) {
        modelToUpdate.set(data);
    }
}

这里是一个 fiddle ，显示了上面的操作:http://jsfiddle.net/xwmx64y3/