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

时间:2016-06-12 10:23:23

标签: javascript backbone.js

我正在尝试模拟多个套接字响应,在我的视图中监听每个响应并更新模型,但是我正在设法使用相同的数据更新每个视图。任何人都可以建议我需要具备哪些内容才能更新与数据相关的视图,现在我非常困惑这一切是如何工作的,如果响应中有唯一数据,我应该检查一下在视图或模型等?

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

1 个答案:

答案 0 :(得分:1)

我会采取略有不同的方法。您的视图应该只监听其支持的一个模型的更改。这样每个视图都不需要解析每个套接字消息:

val result1: ValidatedNel[String, Unit] = validations1.sequence_
//  Valid(())
val result2: ValidatedNel[String, Unit] = validations2.sequence_
// Invalid(OneAnd(kaboom,List(boom)))

validations1.sequence_.as(validatedValue) // as(x) is equal to map(_ => x)

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

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

这是一个显示上述行动的小提琴:http://jsfiddle.net/xwmx64y3/