javascript - significado - marionette js

Backbone.Marionette: aplazar la vista cerrar hasta que se complete la animación Cerrar

Question

Intento establecer animaciones en el renderizado y el cierre de un ItemView con Backbone.Marionette. Para renderizar una vista, esto es bastante simple:

MyItemView = Backbone.Marionette.View.extend({
   ...
   onRender: function() {
     this.$el.hide().fadeIn();
   }
   ...
});

Esto hará que mi vista se desvanezca cuando la renderice. Pero digamos que quiero desvanecer mi vista al cerrar.

beforeClose: function() {
   this.$el.fadeOut();       // doesn''t do anything....
}

Esto no funcionará, porque el elemento se cierra inmediatamente después de llamar this.beforeClose() , por lo que la animación no tiene tiempo para completarse.

¿Hay alguna manera, usando Marionette tal como está, de realizar una animación de cierre?

Alternativamente, esta es la solución que he estado usando:

_.extend(Backbone.Marionette.ItemView.prototype, {
    close: function(callback) {

        if (this.beforeClose) {

            // if beforeClose returns false, wait for beforeClose to resolve before closing
            // Before close calls `run` parameter to continue with closing element
            var dfd = $.Deferred(), run = dfd.resolve, self = this;
            if(this.beforeClose(run) === false) {
                dfd.done(function() {
                    self._closeView();              // call _closeView, making sure our context is still `this`
                });
                return true;
            }
        }

        // Run close immediately if beforeClose does not return false
        this._closeView();
    },

// The standard ItemView.close method.
    _closeView: function() {
        this.remove();

        if (this.onClose) { this.onClose(); }
        this.trigger(''close'');
        this.unbindAll();
        this.unbind();      
    }
});

Ahora puedo hacer esto:

beforeClose: function(run) {
    this.$el.fadeOut(run);      // continue closing view after fadeOut is complete
    return false;
},

Soy nuevo en el uso de Marionette, así que no estoy seguro de si esta es la mejor solución. Si esta es la mejor manera, enviaré una solicitud de extracción, aunque querré pensar un poco más en cómo esto podría funcionar con otros tipos de vistas.

Esto podría ser utilizado para otros fines, como solicitar confirmación al cerrar (consulte este problema ) o ejecutar cualquier tipo de solicitud asincrónica.

¿Pensamientos?

Answer 1

Anular el método de close es la única forma de hacerlo, pero puede escribirlo un poco más corto, ya que puede llamar al método de close Marionettes en lugar de duplicarlo:

_.extend(Backbone.Marionette.ItemView.prototype, {
    close: function(callback) {
        var close = Backbone.Marionette.Region.prototype.close;
        if (this.beforeClose) {

            // if beforeClose returns false, wait for beforeClose to resolve before closing
            // Before close calls `run` parameter to continue with closing element
            var dfd = $.Deferred(), run = dfd.resolve, self = this;
            if(this.beforeClose(run) === false) {
                dfd.done(function() {
                    close.call(self);
                });
                return true;
            }
        }

        // Run close immediately if beforeClose does not return false
        close.call(this);
    },


});

Otra idea es remove método de remove de su vista. Entonces se desvanece el elemento de la vista y luego se elimina del DOM

remove: function(){
  this.$el.fadeOut(function(){
    $(this).remove();
  }); 
}