Befüllen Backbone-Ansicht mit mehreren Sammlungen

Question

Ich bin neu in Backbone.

Ich suche ein Design-Muster, das für meine Situation funktioniert.

Zur Zeit habe ich eine Ansicht Vorlage, die aus mehreren HTML besteht aus:

<select id="s1"></select> 
<select id="s2"></select> 
<select id="s3"></select> 
.... 

und gehe auf die select mit mehreren Backbone Sammlungen bevölkern, mit unterschiedlichem JAX-RS-API Weg.

var C1 = Backbone.Collection.extend({ 
    url='/path1' 
}); 

var C2 = Backbone.Collection.extend({ 
    url='/path2' 
}); 

... 

Ein gerader Weg nach vorn, ist eine Lösung wie this hat:

render: function(){ 
    var that = this, promises = [], 
     c1 = new C1(), c2 = new C2(), c3 = new C3(); 

    promises.push(c1.fetch()); 
    promises.push(c2.fetch()); 
    promises.push(c3.fetch()); 
    ... 

    $.when.apply(null, promises).done(function(){ 
     that.$el.html(FormTemplate({c1m: c1.models, c2m: c2.models, c3m: c3.models, ...})); 
    }); 

    return this; 
} 

Dies ist jedoch mehrere API-Aufrufe von dem Client an den Java-Server beteiligen. Gibt es eine Möglichkeit, dies mit nur 1 API-Aufruf zu erreichen?

Danke.

Answer 1

Offensichtlich sollte die API eine einzelne Route bereitstellen, die alle Daten zurückgibt. Dann können Sie sie mit einer einzigen Sammlung abrufen und gefilterte Daten an andere Sammlungen weitergeben, ohne dass sie API-Aufrufe ausführen müssen.

Etwas wie:

var SingleEndPointCollection = Backbone.Collection.extend({ 
    url = '/singleEndPoint' 
}); 

var C1 = Backbone.Collection.extend({}); 

var C2 = Backbone.Collection.extend({}); 

var C3 = Backbone.Collection.extend({}); 

var view = Backbone.View.extend({ 
    initialize: function() { 
    var that = this; 
    this.collection = new SingleEndPointCollection(); 
    this.collection.fetch({ 
     success: function(collection, response) { 
     that.c1 = new C1(collection.filter(function() { 
      // your logic here 
     })); 
     that.c2 = new C2(collection.filter(function() { 
      // your logic here 
     })); 
     that.c3 = new C3(collection.filter(function() { 
      // your logic here 
     })); 
     that.render(); 
     } 
    }); 
    }, 
    render: function() { 
    var that = this; 
    that.$el.html(FormTemplate({ 
     c1m: that.c1.toJSON(), 
     c2m: that.c2.toJSON(), 
     c3m: that.c3.toJSON() 
    })); 
    return this; 
    } 
});