Backbone.js mehrere Ansichten, eine Sammlung, ein Abruf

Question

Ich versuche, mehrere Ansichten mit einer Sammlung und einem Abruf alle 5 Sekunden zu generieren.

Unten ist ein funktionierendes Beispiel, aber beide Ansichten werden beim Abrufen aktualisiert. Ich könnte die Antwort in mehrere URLs splice, aber ich möchte die Anzahl der Anfragen minimieren.

Mein aktuelles Problem ist, dass ich nicht alle Ansichten alle 5 Sekunden erneut rendern möchte, wenn die Sammlung erneut abgerufen wird, nur die verknüpfte Ansicht, die geändert wurde. Ich habe versucht, mehrere Modelle in der Sammlung zu erstellen und das richtige Objekt in der Parse-Funktion ohne Glück hinzuzufügen.

Antwort:

{ 
    "json-1": { 
    "sub_1": "3", 
    "sub_2": [], 
    }, 
    "json-2": { 
    "sub_1": [], 
    "sub_2": "1", 
    }, 
} 

// Client

const APICollection = Backbone.Collection.extend({ 
    initialize: (models, options) => { 
     this.id = options.id; 
    }, 
    url:() => { 
     return 'https://url.url/' + this.id; 
    }, 
    model: APIModel, 
     parse: (resp) => { 
     return resp; 
    }, 
}); 

const ViewOne = Backbone.View.extend({ 
    initialize: function() { 
     this.collection.bind('sync', this.render, this); 
     this.update(); 
     _.bindAll(this, 'update'); 
    }, 
    render: function (n, collection) { 
     // Render view 
    }, 
    update: function() { 
     let self = this; 
     this.collection.fetch({ 
      update: true, remove: false, success: function() { 
       setTimeout(self.update, 5000); 
      } 
     }); 
    } 
}); 

// Also updates when re-fetched 
const ViewTwo = Backbone.View.extend({ 
    initialize: function() { 
     this.collection.bind('sync', this.render, this); 
    }, 
    render: function (n, collection) { 
     // Render function 
    } 
}); 

let col = APICollection([], {id: 'someid'}); 
new ViewOne({collection: col, el: $("#one")}); 
new ViewTwo({collection: col, el: $("#two")}); 

** Update

Um zu klären: "nur die zugehörige Ansicht, die geändert". Damit meine ich, dass 'ViewOne' nur dann neu gerendert werden sollte, wenn 'json-1' geändert wurde und 'ViewTwo' nicht erneut gerendert werden soll. Derzeit wird die vollständige Antwort an beide Ansichten gesendet.

Answer 1

Wenn Sie mit einer API arbeiten, die ein Objekt und kein Array von Objekten zurückgibt, ist der beste Ansatz, eine Backbone.Model direkt zu verwenden.

update: function() { 
    let self = this; 
    this.model.fetch({ 
     update: true, remove: false, success: function() { 
      setTimeout(self.update, 5000); 
     } 
    }); 
} 

Das Modell wird geholt immer noch die gleiche Art und Weise wie die Sammlung, aber die Ansichten zu bestimmten Attributen auf dem Modell hören, statt:

this.collection.bind('sync', this.render, this); 

Folgendes kann verwendet werden:

this.model.bind('change:json-1', this.render, this); 

Tipp: Besser listenTo anstatt binden, es ist sicherer (siehe docs)