Problèmes d'accès des attributs d'un modèle imbriqué Backbone.js

Question

J'ai un fichier JSON qui ressemble à ceci:

JSON:

{
 "clefs": [ 
           {"title": "..", "path": ".."},
           ... , 
           {"title": "..", "path": ".."}
          ],

  ....

 "rests": [ 
           {"title": "..", "path": ".."}, 
           ... , 
           {"title": "..", "path": ".."}
          ]

} 

Ceci est un JSON imbriqué, non? J'essaie donc de convertir en modèle / Collections imbriquées dans Backbone.js comme ceci:

Backbone.js:

window.initModel = Backbone.Model.extend({
  defaults: {
    "title": "",
    "path": ""
  }
});

window.CustomCollection = Backbone.Collection.extend({
  model: initModel
});

window.Init = Backbone.Model.extend({
  url : function(){
  return  "/api/data.json"      
},

parse: function(response) {

  clefs = new CustomCollection();
  clefs.add(response.clefs);        
  this.set({clefs: clefs});

  .....

  rests = new CustomCollection();
  rests.add(response.rests);        
  this.set({rests: rests});
} 
});

Maintenant, je suis sorti avec un modèle et dans ses attributs ma collection. Clefs, ..., repose

Quand il est venu de passer ma collection à une vue que je ne peux pas!

J'ai fait cette

Router:

$(document).ready(function() {
  var AppRouter = Backbone.Router.extend({
  routes: {
    ""  : "init"
  },

  init: function(){
    this.initial = new Init();      
    this.initialView = new InitView({model: this.initial});
    this.initial.fetch();

 }
});

var app = new AppRouter();
Backbone.history.start();
});

Voir:

window.InitView = Backbone.View.extend({
  initialize : function() {
    this.model.bind("reset", this.render, this);//this.model.attributes send my 4 Collections Models back! But impossible to extract with "get" these Attributes

},

  render : function() {
    console.log("render");
  }
});

Il est une situation très inquiétante en ce moment !! J'ai un modèle Backbone avec des attributs (Collections) mais je ne peux pas extraire ces attributs, j'essaie avec JSON (), obtenir, _.each, _.map mais sans succès

Qu'est-ce que je veux est d'extraire mes collections à partir du « initial » de Nom du modèle !! this.initial.attributes retourner un objet avec mes collections en elle! mais je ne peux pas passer ceux à la vue!

Mise à jour 1:

Modèle est passé à la vue, mais je ne peux pas toujours accéder à ses attributs avec get ou envoyer ses attributs à d'autres vues! le rendu ne peut pas être tiré trop !!!

Mise à jour 2: Après plusieurs jours de maux de tête que je prends la résolution pour le rendre simple!

Pourquoi? Parce que je viens de 4 Collections pour l'instant: clefs, altérations, notes et silences

Modèle:

window.initModel = Backbone.Model.extend({
  defaults: {
   "title": "",
   "path": ""
  }
});

window.ClefsCollection = Backbone.Collection.extend({
  model: initModel,
  url: "/api/data.json",
  parse: function(response){
    return response.clefs;
  }
});
...
and so on

ROUTEUR:

....

this.clefsColl = new ClefsCollection();
this.clefsColl.fetch();
this.clefsCollView = new ClefsView({collection: this.clefsColl});

....

Answer 1

init: function(){
  this.initial = new Init();      
  this.initialView = new InitView({model: this.initial});
  this.initial.fetch();
}

regarde comme je l'avais prévu, mais ceci:

clefs = new CustomCollection();
clefs.add(response.clefs);        
this.set({clefs: clefs});

Pas tellement. Je suis un peu Backbone.js newb moi-même, donc je suis encore à apprendre la meilleure façon de traiter avec des modèles composites ainsi. Ce que je l'ai fait précédemment est avoir une vue garder la trace de deux modèles (comme il a montré une liste de listes, mais avec seulement l'un des sous-listes visibles à tout moment). Chaque fois qu'un élément de la première liste a été cliqué, le modèle contenant la sous-liste a été sélectionné, et à partir de ce modèle serait « obtenir » le champ, toJSON () (ce qui est un nom vraiment malheureux parce que ce n'est pas une chaîne JSON, mais la représentation de l'objet ), puis réinitialiser un modèle lié à une vue pour la sous-liste actuelle à afficher. C'est un peu difficile à expliquer sans code, mais je suis un peu à court de temps pour le moment. Plus tard, je peux essayer d'expliquer mieux (peut-être avec une autre réponse).

EDIT 1

Pour préciser, mon objection à l'attribution par set et récupérer plus tard par get. Je ne suis pas sûr de savoir comment Backbone.js gérerait cela. J'aimerais savoir, cependant.

EDIT 2

Vous voudrez peut-être regarder: Backbone.js vues et modèles imbriqués structuration

En fait, il suggère au lieu d'attribuer par jeu, vous faites simplement les propriétés des modèles sous du modèle composite

au lieu de

parse: function(response) {

  clefs = new CustomCollection();
  clefs.add(response.clefs);        
  this.set({clefs: clefs});

  .....

Vous auriez

parse: function(response) {

  this.clefs = new CustomCollection();
  this.clefs.add(response.clefs);
     /*Or maybe you really mean this.clefs.reset(response.clefs)*/

  .....  /* something similar for rests, etc */

}

Et puis si vous voulez lier une vue spécifique, dans votre routeur, vous avez défini CleftsView, RestsView, etc. En supposant

  init: function(){
    this.initial = new Init();      
    this.initialView = new InitView({model: this.initial});
    this.clefsView = new ClefsView({model: this.initial.clefs});
    this.restsView = new RestsView({model: this.initial.rests});

    .....

    this.initial.fetch();
    .....

  }

J'aurait suggéré plus tôt, mais je ne sais pas si cela était une pratique courante ou non. I'mt toujours pas sûr si je aime la suggestion, que je serais tenté de mettre les modèles et repose Fentes sous une propriété « modèles » de Init au lieu de directement sous Init.

Answer 2

Ces deux lignes n'a pas de sens du tout:

init: function(){
  this.init = new Init();
  this.initView = new InitView({collection: this.init.get("rests") });
  this.init.fetch();

Tout d'abord vous avez une fonction d'initialisation dans votre routeur tout en appelant this.init = new Init(); remplacera cette fonction, donc chaque fois que la route est appelée à nouveau votre fonction d'initialisation sint plus mais votre modèle. Ensuite, vous créez un nouveau modèle sans données, de sorte que son vide. Que vous essayez d'obtenir « repose » sur le modèle vide. Après que vous remplissez le modèle. Peut-être que vous voulez quelque chose comme ceci:

init: function(){
  //create a new model, fetch the data from the server. On success create a new view passing data from the model.
  var init = new Init().fetch({
      success: function(){new InitView({collection: init.get("rests") });}
  });