design patterns - pattern - Patrón para gestionar vistas en backbone

design patterns js

Question

Al venir de GWT, Backbone parece perder una solución integrada sobre cómo manejar el ciclo de vida de una vista. En GWT, cada actividad, que es más o menos el equivalente a una Vista en Backbone, es administrada por un ActivityManager que llama a OnStart / onStop en la actividad, pasando el eventBus y el elemento donde se puede representar la Actividad. El ActivityManager desvinculará todos los eventos que la actividad haya enlazado con el bus de eventos y eliminará la vista del DOM.

En Backbone, es fácil vincular los eventos con el modelo y la colección, pero debes eliminarlos manualmente y no hay un método de api común en el que hagas esto.

Así que estoy buscando un patrón de mejores prácticas sobre cómo administrar las vistas para garantizar que no haya vistas muertas o deshabilitadas que no escuchen los eventos.

Answer 1

Estoy usando una BaseView personalizada, que extiende el método de eliminación de Backbone:

app.BaseView = Backbone.View.extend({

    views: [], // array to keep a ref of child-views for proper disposal later on

    remove: function() {

        // dispose any sub-views
        _.each(this.views || [], function(view) {
            view.remove();
        });

        // if the inheriting class defines a custom on-remove method, call it!
        _.isFunction(this.onRemove) && this.onRemove();

        // unbind all events from this view
        this.off();

        // finally, call Backbone''s default remove method to
        // remove the view from the DOM
        Backbone.View.prototype.remove.call(this);
    }
}

Todavía hay un problema: los modelos y las colecciones deben desecharse a mano, porque no sabe si también las utilizan otras vistas.

Answer 2

Parece que Marionette finalmente tiene la functionality que estoy buscando.

Answer 3

Publico mi solución para administrar la vista en https://github.com/thomasdao/Backbone-View-Manager .

El administrador de vistas siempre limpiará la vista existente antes de crear una nueva vista. Ahora voy a inicializar una nueva vista por:

newView = VM.createView("newView", function(){
             return new View();
          };

Si quiero reutilizar una vista en lugar de crear una nueva, puedo usar

newView = VM.reuseView("newView", function() {
              return new View();
          }

La diferencia entre VM.reuseView y VM.createView es que, reuseView buscará la vista existente con el nombre "newView", si lo encuentra, volverá a usted. De lo contrario, ejecutará la función de devolución de llamada y el resultado de caché. VM.createView siempre ejecutará la función de devolución de llamada y limpiará la vista existente por usted. Por lo tanto, es posible que desee utilizar VM.createView si las vistas son dinámicas y cambian con frecuencia.

Answer 4

tienes razón, no hay ninguna solución para esto (todavía).

Sin embargo, es posible, por supuesto, extender la red troncal para proporcionar esta funcionalidad. Derick Bailey ha escrito una publicación en el blog sobre esto recientemente.

Eche un vistazo aquí: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

Este no es, de ninguna manera, el Santo Grial, puedes implementarlo como desees, pero es un enfoque muy directo para manejar las vistas de los zombis. Ahora debes cuidar de otras criaturas que se arrastran en tu memoria, pero esto es Un comienzo con las vistas al menos!