significado - Backbone.js listenTo el cambio de tamaño de la ventana lanzando[objeto Objeto] no tiene error de ''aplicar'' del método

backbone view events

Question

Problema:

Estoy tratando de adjuntar un evento de cambio de tamaño a la ventana desde una vista usando el nuevo método listenTo () en Backbone.js. El evento parece vincularse a la ventana, sin embargo, cuando la ventana se vuelve a colocar, se produce el siguiente error:

No se detectó TypeError: Object [object Object] no tiene el método ''apply'' jquery.js: 2 p.event.dispatch jquery.js: 2 p.event.add.g.handle.h

Aquí está el código que adjunta el evento a la vista:

this.listenTo($(window),"resize", this.resizeContext, this));

Aquí está la función resizeContext:

  resizeContext: function(event) {

            console.log("resizing context for "+this.id);

            this.setHeight();

            // trigger resize event (use event bus)
            this.options.vent.trigger("resize", event);

        }

Nota: utilizando el estándar $(window).on("resize",this.resizeContext) adjunta el evento y se ejecuta como debería. Estoy intentando aprovechar la nueva característica stopListening() que se agrega a view.remove();

Answer 1

En mi código, necesito hacer .debounce ( (this.resizeContext) .bind (this)).

Lo que hace que sea más difícil ser apagado. Como una solución sucia, simplemente apago todos los escuchas de ''redimensionar'' cuando elimino la vista. Supongo que en la nueva vista, si hay algún oyente de cambio de tamaño, se activará de nuevo.

remove: function() {
    $(window).off("resize");
    //call the superclass remove method
    Backbone.View.prototype.remove.apply(this, arguments);
}

Answer 2

Los nuevos listenTo y stopListening son métodos de la stopListening Backbone.Events , y solo se pueden usar para escuchar eventos Backbone que se activan con .trigger , como la collection:add integrada collection:add , o model:change events.

Eso significa que no podrá utilizar la funcionalidad de stopListening para eventos DOM, como por ejemplo window:resize .

Considere reemplazar el método View.remove lugar.

var SomeView = Backbone.View.extend({
  initialize:function() {
    $(window).on("resize",this.resizeContext)
  },

  remove: function() {
    $(window).off("resize",this.resizeContext);
    //call the superclass remove method
    Backbone.View.prototype.remove.apply(this, arguments);
  }
});

Answer 3

Si desea seguir utilizando listenTo es posible que desee utilizar una envoltura única para los elementos DOM:

/**
 * Use Backbone Events listenTo/stopListening with any DOM element
 *
 * @param {DOM Element}
 * @return {Backbone Events style object}
 **/
function asEvents(el) {
    var args;
    return {
        on: function(event, handler) {
            if (args) throw new Error("this is one off wrapper");
            el.addEventListener(event, handler, false);
            args = [event, handler];
        },
        off: function() {
            el.removeEventListener.apply(el, args);
        }

    };
}

Ejemplo:

view.listenTo(asEvents(window), "resize", handler);

y el oyente se eliminará automáticamente en view.remove() o view.stoplistening()

Aquí hay una implementación más compleja para múltiples escuchas de eventos https://gist.github.com/epeli/5927950