¿Cómo funciona Backbone.js?

Question

En el proceso de tronzado completamente grocking. ¿Existen recursos o diagramas visuales que representen el alcance completo de la arquitectura de la red troncal? ¿Algún otro recurso que recomendarías? ¡Gracias!

Answer 1

Mira @ respuesta de Anton a esta pregunta: Understanding the internal structural dependencies of MVC in Backbone.js

En realidad, no es necesario gastar tanto tiempo con la arquitectura - es un marco que puede ser utilizado para ayudar a poner juntos utilizando construcciones OO simples o un diseño basado en eventos. Es, básicamente, tiene sólo 4 conjuntos de clases (por así decirlo)

1. Modelos - que almacenan datos real que necesita almacenar/manipular y sincronización con el servidor de una manera reparador (utilizando JSON/Ajax)
2. Colecciones - para ayudarlo a almacenar una lista de modelos y usar el maravilloso underscore.js para ayudar a repetirlo usando varias operaciones para hacer su vida MUCHO más fácil
3. Vistas - Ayuda a separar las preocupaciones. Usted restringe las operaciones de renderizado a esta clase y también la usa para actuar como un "controlador": para capturar eventos y realizar operaciones en el modelo. O escuchar los eventos de un modelo o colección para actualizar la vista cuando cambia el modelo subyacente.
4. Router: en función de los fragmentos de la URL, puede elegir 'enrutar' la lógica de sus aplicaciones, en términos generales. En función de los fragmentos de tu URL, puedes elegir qué funciones invocar para que puedas "encaminar" de manera efectiva el conjunto de métodos correctos en función de tu lógica.

Siga todas las prácticas de diseño de OO que le ayudarán a diseñar mejor, básicamente ayuda a organizar su código y separar sus preocupaciones. Prueba esto: para la aplicación hello world más sencilla, dibuja un diagrama de clase UML que separe la "presenación" de hello-world de la "cadena de almacenamiento": ¡te sorprenderá la forma en que la red troncal puede ayudarte a realizar lo mismo en JavaScript!

Backbone es el mejor amigo de jquery, por así decirlo, para que 'organices' tu código y uses jquery para consultar el DOM. El estilo de consulta es conocer el contexto dependiente. Asumir las siguientes varias Div

<div class="helloClass"> 
<div class="innerHello"> Hello World 1</div> 
</div> 

<div class="helloClass"> 
<div class="innerHello"> Hello World 2</div> 
</div> 

<div class="helloClass"> 
<div class="innerHello"> Hello World 3</div> 
</div> 
... 

Para consultar esta usando jQuery será necesario que sea un dato de identificación almacenar o guardar en Data- encargo * atributos En función de cómo esté diseñada la aplicación. Con la espina dorsal, se crea una vista para cada div y permite trabajar en el div se consulta como esta dentro de la vista:

var text = $(this.el).find('.innerHello').text(); 

Un ejemplo de hacerlo. Hace que la búsqueda en DOM sea más rápida. También podría hacer

var text = $('.innerHello', this.el).text(); 

Espero que esto ayude a aclarar las cosas. Busque la respuesta al enlace de arriba también ... es una gran explicación.

Para el resto: http://documentcloud.github.com/backbone/

Answer 2

Diagramas de Ron son frescas, y quiero añadir el conjunto de diagramas que encontrará en this slides. Desde esta diapositiva precisa y hasta el final, bastante completa y realmente visual.

Espero que ayude!