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

Question

我正在尝试模拟多个套接字响应，监听我视图中的每个响应并更新模型，但现在我正在设法使用相同的数据更新每个视图。谁能建议我需要准备什么才能更新与数据相关的视图，现在我很困惑这一切是如何工作的，如果响应中有唯一数据，我应该在查看或模型等？

示例 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

我会采取稍微不同的方法。您的视图应该只听取它所支持的一个模型的变化。这样每个视图就不需要解析每个套接字消息：

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/

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

Emulating socket event how do I update the relevant view with received model data?

javascript

backbone.js