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

Question

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

那么为什么我不能只做 $(document).on('visibilitychange', 'onVisibilityChange' ？

我知道bind方法是保持和传递方法的上下文，但是我不关心上下文，我从来没有在onVisibilityChange中使用这个。为什么 $(document).on('visibilitychange', 'onVisibilityChange' 不起作用？

Answer 1

这样，this里面的对象onVisibilityChange将是您的视图对象。

如果你不需要这个，那么不要使用_.bind. 唯一的问题是你以后必须非常小心，当你改变主意并使用thisinside时onVisibilityChange：你将很有可能忘记它this不引用视图对象，并在你的代码中引入一些有趣的错误。

---

这是一个工作示例，有和没有_.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 元素）的函数。