Socket-Ereignis emulieren Wie aktualisiere ich die relevante Ansicht mit empfangenen Modelldaten?

Question

Ich versuche, mehrere Socket-Antworten emulieren zu hören für jede Antwort in meiner Sicht und das Modell zu aktualisieren, gerade jetzt jedoch bin ich dabei, jede Ansicht mit den gleichen Daten zu aktualisieren. Kann mir jemand empfehlen, was ich tun müsste, um die Ansicht bezüglich der Daten zu aktualisieren, bin ich momentan sehr verwirrt darüber, wie das alles funktioniert, sollte es eindeutige Daten in der Antwort geben, sollte ich dies in der Ansicht oder das Modell usw.?

Beispiel 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

ich einen etwas anderen Ansatz nehmen würde. Ihre Ansicht sollte nur Änderungen auf dem einen Modell hören, auf dem sie gespeichert ist. Auf diese Weise jede Ansicht muss nicht jede Steckdose Nachricht analysieren:

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

Stattdessen würden Sie separate Logik haben, die Ihre Modelle entsprechend Griffe aktualisieren, wenn Sie Daten empfangen. Dies könnte wie folgt aussehen:

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

Hier ist eine Geige, die oben in Aktion zeigt: http://jsfiddle.net/xwmx64y3/