0

我有如下主干视图：

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 方法中失败，因为“this”不再是对父对象的引用，而是对与事件相关的 event/html 元素的引用。

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

谢谢。

4

2 回答 2

1

你试过bind（http://backbonejs.org/#FAQ-this）吗？

例如：

$(window).on('resize', _.bind( this.resizeHandler, this ) );
于 2013-11-05T15:18:05.710 回答
1

如常见问题解答中所述，条目绑定“this”

也许最常见的 JavaScript “陷阱”是这样一个事实，即当您将函数作为回调传递时，它的值 forthis丢失了。
使用 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调试您的代码，尤其是在您跟踪鼠标移动/调整大小事件时）

于 2013-11-05T15:20:33.923 回答