javascript - template - underscore js que es

adjuntando vistas de backbone.js a elementos existentes vs. insertando el el en el DOM

Question

Estoy implementando mi primera aplicación Backbone no tutorial, y tengo 2 preguntas sencillas sobre un aspecto del uso de backbone.js que no se está asentando muy bien conmigo, que se relaciona con inyectar el el renderizado de una vista en el DOM vs. usando un elemento existente para el . Sospecho que les proporcionaré a todos ustedes algunos "momentos de enseñanza" aquí, y agradezco la ayuda.

La mayoría de los ejemplos de Backbone View que veo en la web especifican tagName, id y / o className, al crear una vista y, por lo tanto, crean un el que no está vinculado desde el DOM. Por lo general, se ven algo así como:

App.MyView = Backbone.View.extend({
    tagName: ''li'',
    initialize: function () {
     ...
    },
    render: function () { 
        $(this.el).html(<render an html template>);
        return this;
    }
}); 

Pero los tutoriales no siempre se vuelven a explicar cómo recomiendan obtener el elemento representado en el DOM. Lo he visto de diferentes maneras. Entonces, mi primera pregunta es: ¿dónde está el lugar apropiado para llamar al método de renderización de una vista e insertar su el en el DOM? (no necesariamente uno y el mismo lugar). Lo he visto hecho en un enrutador, en las funciones de inicialización o renderización de la vista, o simplemente en una función de documento preparado para el nivel raíz. ( $(function () ). Me puedo imaginar que cualquiera de estos trabajos, pero ¿hay una forma correcta de hacerlo?

En segundo lugar, estoy comenzando con algo de HTML markup / wireframe, y la conversión de porciones html a js plantillas correspondientes a las vistas de la red troncal. En lugar de dejar que la vista represente un elemento desacoplado y proporcionar un punto de anclaje en el html para pegarlo, siento que es más natural, cuando solo va a haber un elemento para una vista y no va a desaparecer, para usar un elemento envoltorio vacío existente (a menudo un div o span ) como el el mismo. De esta forma, no tengo que preocuparme por encontrar el lugar en el documento para insertar mi elé sin unir, lo que podría terminar luciendo así (tenga en cuenta las capas adicionales):

<div id="insert_the_el_in_here">  <!-- this is all that''s in the original HTML doc -->
    <div id="the_el">  <!-- i used to be a backbone generated, unattached el but have been rendered and inserted -->
        <!-- we''re finally getting to some useful stuff in here -->
    </div>
 </div>

Entonces, parte de mi segunda pregunta es, para una vista básicamente estática, ¿hay algún problema con el uso de un elemento existente del HTML de la página directamente como el de mi vista? De esta forma, sé que ya está en el DOM, en el lugar correcto, y que la invocación de renderizará inmediatamente la vista en la página. Me gustaría lograr esto pasando el elemento ya exixting al constsructor de mi vista como ''el''. De esta forma, me parece, no tengo que preocuparme de incluirlo en el DOM (lo que hace que la pregunta 1 sea discutible), y la invocación de renderizado actualizará inmediatamente el DOM. P.ej

<form>
   <div someOtherStuff>
   </div>
   <span id="myView">
   </span>
</form>

<script type="text/template" id = "myViewContents"> . . . </script>

<script type="application/javascript">
window.MyView = Backbone.View.extend( {
     initialize: function () {
          this.template = _.template($(''#myViewContents'').html());
          this.render(); 
     },
     render: function () {
          $(this.el).html(this.template());
          return this;
     }
});
$(function () {
    window.myView = new MyView({ el: $(''#myView'').get(0) });
});
</script>

¿Es esta una forma correcta de hacerlo para vistas estáticas en la página? es decir, solo hay una de estas vistas, y no desaparecerá bajo ninguna circunstancia. ¿O hay un mejor camino? Me doy cuenta de que puede haber diferentes maneras de hacer las cosas (es decir, en un enrutador, en una vista principal, en la carga de la página, etc.) en función de cómo estoy usando una vista, pero ahora estoy mirando la carga de la página inicial caso de uso

Gracias

Answer 1

No hay absolutamente nada de malo con la idea de adjuntar una vista a un nodo DOM existente.

Incluso puedes poner el EL como una propiedad en tu vista.

window.MyView = Backbone.View.extend( {
     el: ''#myView'',
     initialize: function () {
          this.template = _.template($(''#myViewContents'').html());
          this.render(); 
     },
     render: function () {
          this.$el.html(this.template()); // this.$el is a jQuery wrapped el var
          return this;
     }
});
$(function () {
    window.myView = new MyView();
});

Lo que recomiendo es hacer lo que funciona ... La belleza de Backbone es que es flexible y satisfará tus necesidades.

En lo que respecta a los patrones comunes, generalmente me encuentro teniendo una vista principal para realizar un seguimiento de las vistas, luego una vista de lista y vistas de elementos individuales.

Otro patrón común en lo que respecta a la inicialización es tener algún tipo de objeto de aplicación para administrar cosas ...

var App = (function ($, Backbone, global) {
    var init = function () {
        global.myView = new myView();
    };

    return {
        init: init
    };
}(jQuery, Backbone, window));

$(function () {
    App.init();
});

Sin embargo, como dije antes, en realidad no hay una forma INCORRECTA de hacer las cosas, solo haz lo que funciona. :)

No dudes en contactarme en twitter @ jcreamer898 si necesitas más ayuda, también echa un vistazo a @derickbailey, es una especie de gurú de BB.

¡Que te diviertas!

Answer 2

También parece que en estos días puedes setElement .

Answer 3

También puede enviar un objeto HTML DOM Element a la vista como la propiedad ''el'' de las opciones.

window.MyView = Backbone.View.extend( {
     initialize: function () {
          this.template = _.template($(''#myViewContents'').html());
          this.render(); 
     },
     render: function () {
          this.$el.html(this.template()); // this.$el is a jQuery wrapped el var
          return this;
     }
});
$(function () {
    window.myView = new MyView({
        el: document.getElementById(''myView'')
    });
});

Answer 4

Use el método de delegar eventos:

initialize: function() {
    this.delegateEvents();
}

Para entender por qué: http://backbonejs.org/docs/backbone.html#section-138 cerca de "Establecer devoluciones de llamada, dónde"