Cómo manejar la inicialización y representación de subviews en Backbone.js?

Esta es una gran pregunta. Backbone es genial debido a la falta de suposiciones que hace, pero significa que tienes que (decidir cómo) implementar cosas como esta tú mismo. Después de mirar a través de mis propias cosas, encuentro que (tipo de) uso una mezcla de escenario 1 y escenario 2. No creo que exista un 4to escenario mágico porque, simplemente, todo lo que haces en el escenario 1 y 2 debe hacerse.

Creo que sería más fácil explicar cómo me gusta manejarlo con un ejemplo. Digamos que tengo esta página simple se divide en las vistas especificadas:

Digamos que el HTML es, después de ser renderizado, algo como esto: {[59]]}

<div id="parent">
    <div id="name">Person: Kevin Peel</div>
    <div id="info">
        First name: <span class="first_name">Kevin</span><br />
        Last name: <span class="last_name">Peel</span><br />
    </div>
    <div>Phone Numbers:</div>
    <div id="phone_numbers">
        <div>#1: 123-456-7890</div>
        <div>#2: 456-789-0123</div>
    </div>
</div>

Esperemos que sea bastante obvio cómo el HTML coincide con el diagrama.

El ParentView tiene 2 vistas secundarias, InfoView y PhoneListView, así como algunos divs adicionales, uno de los cuales, #name, debe establecerse en algún momento. PhoneListView tiene vistas secundarias propias, una matriz de entradas PhoneView.

Así que a su pregunta real. Yo me encargo inicialización y representación diferentes según el tipo de vista. Divido mis vistas en dos tipos, Parent vistas y Child vistas.

La diferencia entre ellos es simple, Parent las vistas tienen vistas secundarias mientras que Child las vistas no. Así que en mi ejemplo, ParentView y PhoneListView son vistas Parent, mientras que InfoView y las entradas PhoneView son vistas Child.

Como mencioné antes, la mayor diferencia entre estas dos categorías es cuando se les permite renderizar. En un mundo perfecto, quiero Parent vistas para renderizar una sola vez. Depende de sus vistas secundarias manejar cualquier re-renderizado cuando el(los) modelo (s) cambian. Child vistas, por otro lado, permito volver a renderizar en cualquier momento que lo necesiten, ya que no tienen ninguna otra vista que dependa de ellas.

En un poco más de detalle, para las vistas Parent me gusta que mis funciones initialize hagan algunas cosas:

1. Inicializar mi propia vista
2. Render my own view
3. Cree e inicialice cualquier vista secundaria.
4. Asignar cada vista secundaria un elemento dentro de mi vista (por ejemplo, el InfoView se asignaría #info).

El paso 1 se explica por sí mismo.

El paso 2, el renderizado, se realiza de manera que cualquier elemento en el que se basan las vistas secundarias ya exista antes de intentar asignarlos. Al hacer esto, sé que todos los hijos events se configurarán correctamente, y puedo volver a renderizar sus bloques tantas veces como quiera sin tener que volver a delegar nada. En realidad no render ninguna vista de niño aquí, permito ellos para hacer eso dentro de su propio initialization.

Los pasos 3 y 4 se manejan al mismo tiempo que paso el al crear la vista hija. Me gusta pasar un elemento aquí, ya que siento que el padre debe determinar dónde, en su propia opinión, se le permite al hijo poner su contenido.

Para el renderizado, trato de mantenerlo bastante simple para las vistas Parent. Quiero que la función render no haga nada más que renderizar la vista padre. Sin delegación de eventos, sin representación de las opiniones del niño, Nada. Solo un simple renderizado.

A veces esto no siempre funciona. Por ejemplo, en mi ejemplo anterior, el elemento #name tendrá que actualizarse cada vez que el nombre dentro del modelo cambie. Sin embargo, este bloque es parte de la plantilla ParentView y no es manejado por una vista Child dedicada, así que trabajo alrededor de eso. Crearé algún tipo de función subRender que solo reemplace el contenido del elemento #name, y no tenga que desechar todo el elemento #parent. Esto puede parecer un truco, pero realmente he encontrado que funciona mejor que tener que preocuparse por volver a representar todo el DOM y volver a unir elementos y cosas así. Si realmente quisiera hacerlo limpio, crearía una nueva vista Child (similar a la InfoView) que manejaría el bloque #name.

Ahora para las vistas Child, las vistas initialization son bastante similares a las vistas Parent, solo que sin la creación de otras vistas Child. Así que:

1. Inicializar mi vista
2. La configuración enlaza la escucha para cualquier cambio en el modelo que me importa
3. Render my view {[81]]}

Child el renderizado de vistas también es muy simple, simplemente renderizar y establecer el contenido de mi el. Una vez más, nada de meterse con la delegación ni nada por el estilo.

Aquí hay un código de ejemplo de cómo puede ser mi ParentView:

var ParentView = Backbone.View.extend({
    el: "#parent",
    initialize: function() {
        // Step 1, (init) I want to know anytime the name changes
        this.model.bind("change:first_name", this.subRender, this);
        this.model.bind("change:last_name", this.subRender, this);

        // Step 2, render my own view
        this.render();

        // Step 3/4, create the children and assign elements
        this.infoView = new InfoView({el: "#info", model: this.model});
        this.phoneListView = new PhoneListView({el: "#phone_numbers", model: this.model});
    },
    render: function() {
        // Render my template
        this.$el.html(this.template());

        // Render the name
        this.subRender();
    },
    subRender: function() {
        // Set our name block and only our name block
        $("#name").html("Person: " + this.model.first_name + " " + this.model.last_name);
    }
});

Puedes ver mi implementación de subRender aquí. Al tener cambios vinculados a subRender en lugar de render, no tengo que preocuparme por destruir y reconstruir todo el bloque.

Aquí está código de ejemplo para el bloque InfoView:

var InfoView = Backbone.View.extend({
    initialize: function() {
        // I want to re-render on changes
        this.model.bind("change", this.render, this);

        // Render
        this.render();
    },
    render: function() {
        // Just render my template
        this.$el.html(this.template());
    }
});

Los lazos son la parte importante aquí. Al vincularme a mi modelo, nunca tengo que preocuparme por llamar manualmente render. Si el modelo cambia, este bloque se re-renderizará a sí mismo sin afectar a ninguna otra vista.

El PhoneListView será similar al ParentView, solo necesitará un poco más de lógica en sus funciones initialization y render para manejar colecciones. La forma en que manejes la colección depende realmente de ti, pero al menos necesitarás para escuchar los eventos de la colección y decidir cómo desea renderizar (anexar/eliminar, o simplemente volver a renderizar todo el bloque). Personalmente, me gusta agregar nuevas vistas y eliminar las antiguas, no volver a renderizar toda la vista.

El PhoneView será casi idéntico al InfoView, solo escuchando los cambios de modelo que le importan.

Esperemos que esto haya ayudado un poco, por favor hágamelo saber si algo es confuso o no lo suficientemente detallado.