Question

我有一个Backbone视图如下：

var myView = Backbone.View.extend({
    bar: 1,

    open: function() {
        $(window).on('resize', this.resizeHandler);
    },

    close: function() {
        $(window).off('resize', this.resizeHandler);
    },

    resizeHandler: function(e) {
        alert(this.bar);
    }
});

this.bar在resizeHandler方法中失败，因为＆＃39;这个＆＃39;不再是对父对象的引用，而是对与事件相关的事件/ html元素的引用。

我怎样才能让它工作，以便resizeHandler有一个对父对象的引用，我仍然可以引用一个我可以在Jquery on和off方法中使用的函数？

感谢。

Answer 1

您是否尝试过bind（http://backbonejs.org/#FAQ-this）？

例如：

$(window).on('resize', _.bind( this.resizeHandler, this ) );

Answer 2

正如FAQ, entry Binding "this"

所述

也许唯一最常见的JavaScript“陷阱”就是这样的事实当您将函数作为回调传递时，this的值将丢失使用Backbone，在处理事件和回调时，您经常会这样做发现依赖Underscore.js的_.bind和_.bindAll很有用。

解决问题的最简单方法可能是使用_.bindAll

var myView = Backbone.View.extend({
    bar: 1,

    initialize: function() {
       _.bindAll(this, 'resizeHandler');
    },

    open: function() {
        $(window).on('resize', this.resizeHandler);
    },

    close: function() {
        $(window).off('resize', this.resizeHandler);
    },

    resizeHandler: function(e) {
        console.log(this.bar);
    }
});

还有一个演示版http://jsfiddle.net/nikoshr/DZqDw/（我建议避免alert调试代码，尤其是当您跟踪鼠标移动/调整大小事件时）

从子方法访问父对象

2 个答案: