Question

var DocumentEventsView = Backbone.View.extend({
  initialize : function () {
    $(document).on('visibilitychange', _.bind(this.onVisibilityChange, this));
  },  
  onVisibilityChange : function () {
    console.log('inside onVisibilityChange');
  }
});

那为什么我不能只做$（文件）.on（'visibilitychange'，'onVisibilityChange'？

我知道bind方法是保留并传递方法的上下文，但我不关心上下文，我从不在onVisibilityChange中使用它。为什么$（document）.on（'visibilitychange'，'onVisibilityChange'不起作用？

Answer 1

这样this内的onVisibilityChange对象将成为您的视图对象。

如果您不需要，请不要使用_.bind。唯一的问题是，当您改变主意并在this内使用onVisibilityChange时，您必须非常小心：您将很有可能忘记this没有引用到视图对象，并在您的代码中引入一些有趣的错误。

Here是一个有效的例子，包括和不包含_.bind：

var  MyView1 = Backbone.View.extend({
        initialize: function () {
            $(document).on('click', _.bind(this.onClick, this));
        },
        onClick: function () {
            console.log('inside onClick, "this" is ' + this.toString());
        },
        toString: function () {
            return "[object MyView1]";
        }
    }),
    myView1 = new MyView1(),
    MyView2 = Backbone.View.extend({
        initialize: function () {
            $(document).on('dblclick', this.onDblClick);
        },
        onDblClick: function () {
            console.log('inside onDblClick, "this" is ' + this.toString());
        },
        toString: function () {
            return "[object MyView2]";
        }
    }),
    myView2 = new MyView2();

console.clear();
$(document).click();
$(document).dblclick();

输出：

inside onClick, "this" is [object MyView1]
inside onDblClick, "this" is [object HTMLDocument]

为简单起见，我使用了click和dblclick个事件。将输出写入控制台，按F12。测试了最新的Chrome。

Answer 2

如果你正在使用Backbone，你不应该使用jQuery。试试这个：

initialize: function() {
    this.on('visibilityChange', this.onVisibilityChange);
},

Answer 3

如果您不想使用_.bind，请不要使用它，如果您遇到问题，请以其他方式解决。

at = this;
$(document).on('visibilitychange', function(){at.onVisibilityChange();});

_.bind做的只是用另一个函数包装函数，在该函数中只调用具有指定上下文的原始函数。

修改：

$('selector').on('event',func)使用$（'selector'）[0]（DOM元素）的上下文调用函数。

为什么我需要为Backbone.js自定义事件使用Underscore.js _.bind方法？

3 个答案: