Problemas para acceder a los atributos desde un modelo de columna vertebral anidado.

Question

Tengo un archivo JSON como esto:

JSON:

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

  ....

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

} 

Este es un JSON anidado, ¿verdad? Así que trato de convertirlo en modelo/colecciones anidadas en Backbone.js como esto:

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});
} 
});

Ahora salí con un modelo y en sus atributos en mi colección: Clefs, ..., descansa.

¡Cuando llegue a pasar mi colección a una vista, no puedo!

yo hice esto

Enrutador:

$(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();
});

Vista :

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");
  }
});

¡Es una situación fea en este momento! Tengo un modelo de columna vertebral con atributos (colecciones) pero no puedo extraer estos atributos, lo intento con json (), get, _. cada, _.map pero sin éxito!

¡Lo que quiero es extraer mis colecciones de la "Inicial" del nombre del modelo! this.initial.attributes ¡Devuelve un objeto con mis colecciones en él! ¡Pero no puedo pasarlos a la vista!

Actualización 1:

Ahora el Modelo se pasa a la vista, pero siempre no puedo acceder a sus atributos con obtener ¡O envíe sus atributos a otras vistas! ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¿¡¡!

Actualización 2:¡Después de varios días de dolores de cabeza, tomo la resolución para simplificar!

¿Por qué? Porque solo tengo 4 colecciones por ahora: Clefs, Accidentes, Notas y RESTS

MODELO :

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

Enrutador:

....

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();
}

Parece como esperaba, pero esto:

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

No tanto. Yo mismo soy un poco columna. Lo que he hecho anteriormente es tener una vista Realizar dos modelos (ya que mostró una lista de listas, pero solo con uno de los sublistas visibles en cualquier momento dado). Cada vez que se hizo clic en un elemento de la primera lista, se seleccionaba el modelo que contenía el sublista, y de ese modelo "obtendría" el campo, tojson () (que es un nombre realmente desafortunado porque no es una cadena JSON sino la representación del objeto ), y luego restablezca un modelo vinculado a una vista para que se muestre el sublist actual. Eso es un poco difícil de explicar sin código, pero tengo un poco de tiempo en este momento. Más tarde puedo intentar explicar mejor (tal vez con otra respuesta).

Edición 1

Solo para aclarar, mi objeción fue asignar set y luego recuperando get. Simplemente no estoy seguro de cómo lo manejarían la columna vertebral. Sin embargo, me encantaría saberlo.

Edición 2

Es posible que desee mirar:Backbone.js estructurando vistas y modelos anidados

Básicamente, sugiere que en lugar de asignar a través del conjunto, solo hace las propiedades de los submodelos del modelo compuesto

Entonces en lugar de

parse: function(response) {

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

  .....

Tuviste

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 */

}

Y luego, si desea vincular una vista específica, en su enrutador, suponiendo que haya definido hendedero, restsview, etc.

  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();
    .....

  }

Podría haber sugerido esto antes, pero no estaba seguro de si esta era una práctica común o no. Todavía no estoy seguro de si me gusta la sugerencia, ya que me sentiría tentado a poner los modelos de descanso y hendiduras bajo una propiedad de "modelos" de Init en lugar de directamente debajo Init.

Answer 2

Estas dos líneas no tienen sentido en absoluto:

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

Primero tiene una función init en su enrutador mientras llama this.init = new Init(); sobrescribirá esta función, por lo que cuando se vuelva a llamar a la ruta de nuevo, sint a su función, pero su modelo. A continuación, crea un nuevo modelo sin ningún dato, por lo que está vacío. Entonces intentas sacar "descansos" del modelo vacío. Después de eso llenas el modelo. Quizás quieras algo como esto:

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") });}
  });