Backbone.js listenTo窗口调整大小throw [object Object]没有方法'apply'错误

Question

问题:

我正在尝试使用Backbone.js中的新listenTo()方法从视图中将resize事件附加到窗口.事件似乎绑定到窗口,但是,当窗口实际被重置时,抛出以下错误:

未捕获的TypeError:对象[object Object]没有方法'apply'jquery.js:2 p.event.dispatch jquery.js:2 p.event.add.g.handle.h

以下是将事件附加到视图的代码:

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

这是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);

        }

注意:使用标准会$(window).on("resize",this.resizeContext)附加事件并按预期运行.我正在尝试利用stopListening()添加的新功能view.remove();

Answer 1

mixin 的新方法listenTo和stopListening方法Backbone.Events,它们只能用于监听.trigger由内置collection:add或model:change事件触发的Backbone 事件.

这意味着您将无法利用stopListeningDOM事件的功能,例如window:resize.

考虑View.remove改为覆盖该方法.

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 2

如果您想继续使用listenTo,可能需要使用以下一个关闭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);
        }

    };
}

例:

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

并且侦听器将自动删除view.remove()或view.stoplistening()

这是多个事件监听器的更复杂的实现https://gist.github.com/epeli/5927950