2011-09-01 19 views
12

Antecedentes¿Cómo rastrea Backbone.js los elementos DOM sin usar IDs?

He estado usando Backbone.js durante algún tiempo y un aspecto de ella que me impresiona es la forma en que me permite simplificar, los elementos abstractos y DOM reutilización como 'vistas'. Intenté leer algunas de las fuentes comentadas y estoy familiarizado con JQuery, pero tengo poco conocimiento de cómo funciona DOM en un nivel más profundo.

Pregunta

¿Cómo elementos de lazo Backbone.js DOM para la asignación de puntos de vista sin un identificador, clase u otro atributo a ellos?

decir

<ul> 
    <li>Item one</li> 
    <li>Item two</li> 
    <li>Item three</li> 
</ul> 

Me encanta que Backbone hace esto y le gustaría saber cómo lo hace!

Respuesta

13

En javascript, una variable puede contener una referencia (es decir, una cosa programática que "se refiere a") a algún elemento del DOM, que es simplemente un objeto Javascript. Backbone se asegura de que, para una vista, al menos ese elemento exista. Por ejemplo, en jQuery, cuando se hace referencia al tercer elemento de la lista:

var item3 = $('ul li').eq(2); 

(Es una lista con desplazamiento cero, el primer elemento es en el índice 0, el tercero en el índice 2), ahora se puede cambiar el texto de "punto tres" a "del artículo tres puntos uno cuatro uno cinco nueve" con jQuery ordinarios manipuladores DOM:

item3.text("Item three point one four one five nine"); 

a pesar de que el elemento de la lista no tiene ningún atributos de clase o de identificación particulares.

El campo el de una vista de red troncal contiene una referencia constante al elemento principal en el que esa vista representa todo su contenido. La red troncal usa el administrador de eventos jQuery delegate para adjuntar un controlador genérico de eventos a esa referencia constante. Cada vez que ocurre un evento dentro de ese elemento DOM o cualquiera de sus hijos, el delegado detecta el evento, junto con una referencia al objeto DOM específico dentro del elemento primario el que creó el evento, y la red troncal utiliza una magia jQuery bastante estándar para asignarlo a un controlador de eventos en la vista.

Es, de hecho, algo muy bueno.

Debo añadir que la "constante" -ness de la referencia el es, eh, discutible. Si está adjuntando lógica de vista a un elemento HTML existente, se asigna al el una vez, en la vista initialize(). Javascript no impone ninguna noción de constancia, pero solo debe asignarlo directamente al el (es decir, this.el = something()) si está seguro de que sabe lo que está haciendo.

+0

Agregue esto como una edición a su respuesta. – Mrchief

+0

¡Esto es fantástico, muchas gracias! – cmpolis

Cuestiones relacionadas