javascript - underscore - backbone.js estructurando vistas anidadas y modelos

underscore js

Question

Usando backbone.js:

Tengo un ModelA de nivel superior que contiene 2 atributos y 2 modelos anidados, ModelB y ModelC. El modelo B y el modelo C tienen 2 atributos de la siguiente manera:

ModelA
attributeA1
attributeA2
ModelB
attributeB1
attributeB2
ModelC
attributeC1
attributeC2

Hay una ViewA para ModelA y una ViewB para ModelB. La función de renderización de ViewA coloca un nuevo div en el cuerpo, mientras que el renderizado de ViewB crea un h1. La inicialización de ViewA llama al renderizado de ViewB para insertar ese h1 en el nuevo div. El fundamento de esta separación es que h1 puede cambiar y requerir una nueva representación independiente de ViewA.

ViewA
initialise:
//call ViewA''s own render function
this.render()
//call ViewB''s render function that further modifies the $("#new") div created earlier.
$("#new").append(ViewB.render().el)
//ViewA''s own render function
render: //place <div id="new"></div> onto ''body''
ViewB
render: //create a <h1></h1>
funcB1: //can this access it''s parent ModelA''s attributes and other objects?

Q1: ViewB tiene una función funcB1. ¿Puede esta función acceder a los atributos de su modelo padre? Atributos tales como attributeA1, o incluso attributeC1 (que sería un hermano / primo)?

P2: ¿Como una expansión adicional a Q1, puede funcB1 acceder a los elementos DOM asociados con ViewA? (en este ejemplo, el #new div?)

P3: En general, ¿cómo puedo definir las asociaciones entre las Vistas y los Modelos como se describe arriba para que todo se una adecuadamente?

Me doy cuenta de que esta pregunta es algo abstracta, pero cualquier persona apreciará cualquier ayuda o guía apreciada.

Answer 1

Existe un complemento de red troncal Backbone-relational.js que proporciona relaciones uno a uno, uno a muchos y muchos a uno entre modelos para Backbone.

Creo que esto js satisfará tus necesidades. Vist BackboneRelational para más documentación.

Answer 2

La respuesta general a la pregunta "¿Puedo hacerlo?" Siempre es "sí", siempre que esté dispuesto a escribir el código ". El punto detrás de Backbone es proporcionar una fuerte separación de modelo y vista. Si B1 tiene una referencia a A1, y A1 tiene una referencia a C1, entonces usted es completamente capaz de crear métodos y establecer las reglas mediante las cuales B1 puede modificar A1 y C1, y así sucesivamente.

Las vistas deben configurarse para recibir eventos CRUD de sus respectivos modelos. Si el usuario hace algo con B1view que modifica el modelo B1, y el modelo B1 a su vez modifica el modelo A1, entonces el modelo A1 debería generar un evento que A1view reciba y cause un re-render de A1view, y así sucesivamente. Debería suceder como magia. (En la práctica, lleva un tiempo lograr que la magia sea correcta, pero he descubierto que Backbone es realmente poderoso. Y BackboneRelational ayuda con cosas como las que describes aquí).

Answer 3

La solución anterior está en el camino correcto, pero tiene algunos problemas.

initialize: function(){
this.viewB = new ViewB();
this.viewB.parentView = this;
$(this.el).append(this.viewB.el);
}

Principalmente, el modelo toJSON () ahora devuelve datos obsoletos. He publicado una solución para solucionar este problema en un complemento de backbone.js . Eres bienvenido para usarlo.

Answer 4

Para poder alcanzar atributos en modelos relacionados, el modelo debe tener algún tipo de conocimiento sobre con qué modelos se relaciona. Backbone.js no trata implícitamente las relaciones o el anidamiento, lo que significa que usted debe asegurarse de que los modelos se conozcan entre sí. Para responder a sus preguntas, una forma de hacerlo es asegurarse de que cada modelo hijo tenga un atributo ''padre''. De esta forma, puede atravesar el anidamiento primero hasta el padre y luego hasta cualquier hermano que conozca.

Para ser más específico con sus preguntas. Al inicializar la modelo A, probablemente esté creando el modelo B y el modelo C, le sugiero que establezca un vínculo con el modelo principal al hacer esto, como este:

ModelA = Backbone.Model.extend({
initialize: function(){
this.modelB = new modelB();
this.modelB.parent = this;
this.modelC = new modelC();
this.modelC.parent = this;
}
}

De esta forma, puede llegar al modelo principal en cualquier función de modelo hijo llamando a this.parent.

Con respecto a sus vistas, al hacer vistas de redes troncales anidadas, me resulta más fácil permitir que cada vista represente una etiqueta HTML utilizando la opción tagName de la vista. Escribiría sus puntos de vista así:

ViewA = Backbone.View.extend({
tagName: "div",
id: "new",
initialize: function(){
this.viewB = new ViewB();
this.viewB.parentView = this;
$(this.el).append(this.viewB.el);
}
});
ViewB = Backbone.View.extend({
tagName: "h1",
render: function(){
$(this.el).html("Header text"); // or use this.options.headerText or equivalent
},
funcB1: function(){
this.model.parent.doSomethingOnParent();
this.model.parent.modelC.doSomethingOnSibling();
$(this.parentView.el).shakeViolently();
}
});

Luego, en el código de inicialización de su aplicación (por ejemplo, en su controlador), iniciaría ViewA y colocaría su elemento dentro del elemento body.

Answer 5

Puede usar algunas extensiones, Backbone-Forms https://github.com/powmedia/backbone-forms por ejemplo. Para seguir su caso de uso, defina un esquema como:

var ModelB = Backbone.Model.extend({
schema: {
attributeB1: ''Text'',
attributeB2: ''Text''
}
});
var ModelC = Backbone.Model.extend({
schema: {
attributeC: ''Text'',
}
});
var ModelA = Backbone.Model.extend({
schema: {
attributeA1: ''Text'',
attributeA2: ''Text'',
refToModelB: { type: ''NestedModel'', model: ModelB, template: ''templateB'' },
refToModelC: { type: ''NestedModel'', model: ModelC, template: ''templateC'' }
}
});

Mire https://github.com/powmedia/backbone-forms#customising-templates para plantillas parciales.

Las partes importantes aquí son type: ''NestedModel'' y template: ''templateXXX'' .

Este complemento tiene algunas limitaciones, pero puede consultar otras en https://github.com/documentcloud/backbone/wiki/Extensions%2C-Plugins%2C-Resources .