Come creare una raccolta con diversi tipi di modelli in backbone.js?

Question

Sto provando a farlo funzionare, ma mi sforzo. La mia raccolta finisce vuota quando controllo la richiamata success su fetch. Non mi dà alcun errore chiaro durante lo parse. Qui è il mio codice:

La mia collezione:

VOR.Collections.GridItems = Backbone.Collection.extend({ 
     model : VOR.Models.GridItem, 
     url: "assets/data/grid.json", 
     parse: function(response){ 
      var self = this; 

      _.each(response, function(griditem){ 
       switch(griditem.type){ 
        case "news": 
         self.add(new VOR.Models.NewsGridItem(griditem)); 
         break; 
        default: 
         self.add(new VOR.Models.StandardGridItem(griditem)); 
         break; 
       } 
      }); 
     } 
}); 

Questo è come mi creo la collezione:

griditems = new VOR.Collections.GridItems(); 

griditems.fetch({ 
    error: function(e) {console.log(e);}, 
    success: function(msg) { 
     console.log(msg) 
    }); 

Quando mi consolo accedere msg ottengo: Object {lunghezza = 0, modelli = [0], _byId = {...}, altro ...}

Ho anche registrato la funzione parse nella raccolta e viene eseguita tramite il file JSON bene ... qualsiasi idee su cosa potrebbe essere sbagliato qui? La lunghezza dell'oggetto msg dovrebbe essere 5..i.e. questo è il numero di volte in cui la funzione parse si ripete e (dovrebbe) aggiungere un modello alla raccolta.

Answer 1

// **parse** converts a response into a list of models to be added to the 
// collection. The default implementation is just to pass it through. 
parse : function(resp) { 
    return resp; 
}, 

Questo è ciò che il doc dice che dovresti fare in analisi. Qualsiasi cosa tu ritorni sarà impostata come matrice di partenza della collezione. Questo è dove è chiamato da:

options.success = function(resp) { 
    collection[options.add ? 'add' : 'refresh'](collection.parse(resp), options); 
    if (success) success(collection, resp); 
    } 

Quindi, vorrei suggerire di cambiare il vostro parse a:

return _.map(response, function(griditem){ 
    switch(griditem.type){ 
     case "news": 
      return new VOR.Models.NewsGridItem(griditem); 
      break; 
     default: 
      return new VOR.Models.StandardGridItem(griditem); 
      break; 
    } 
}); 

Answer 2

Sarà meglio per memorizzare i vostri elementi della griglia in collezioni diverse e avvolgerli con il modello come questo:

var model = Backbone.Model.extend({ 
    url: 'assets/data/grid.json' 
    newsItems: Backbone.Collection.extend({ 
     model: VOR.Models.NewsGridItem 
    }), 
    standartItems: Backbone.Collection.extend({ 
     model: VOR.Models.StandardGridItem 
    }), 

    initialize: function() { 
     this.newsItems = new this.newsItems(); 
     this.standartItems = new this.standartItems(); 

     this.newsItems.bind('all', function() { 
      this.trigger.apply(this, arguments); 
     }, this) 
     this.standartItems.bind('all', function() { 
      this.trigger.apply(this, arguments); 
     }, this) 
    }, 

    parse: function(request) { 
     _.each(response, _.bind(function(griditem) { 
      switch (griditem.type) { 
       case "news": 
        this.newsItems.add(griditem); 
        break; 
       default: 
        this.standartItems.add(griditem); 
        break; 
      } 
     }, this)); 
    } 
}) 

model.fetch() 

Answer 3

un bel modo di gestire questo è quello di ridefinire l'attributo model, che raccontano la collezione come aggiungere un nuovo modello alla raccolta, come spiegato in questo post : A Backbone.js Collection of multiple Model subclasses (grazie @rulfzid, che ha risposto alla mia domanda :))

Nel tuo caso, si dovrebbe essere in grado di definire il modello di attributi in questo modo:

var VOR.Collections.GridItems = Backbone.Collection.extend({ 

    url: "assets/data/grid.json", 

    model: function(attrs, options) { 
    switch(attrs.type) { 
     case "news": 
     return new VOR.Models.NewsGridItem(attrs, options); 
     default: 
     return new VOR.Models.StandardGridItem(attrs, options); 
    } 
    } 

});