Backbone.js“Todos”示例 - 不确定为什么某个代码片段有效

Question

这个问题是关于“Todos”Backbone.js 示例，该示例位于： http://documentcloud.github.com/backbone/docs/todos.html

以下代码块位于“应用程序"部分，并迭代 Todos集合。我的问题是 addOne 函数作为对 Todos 集合的引用传递，但该函数具有对 this 的引用，这不是与 Todos 集合对象调用该函数时 this 所引用的内容相同。

addOne: function(todo) {
    var view = new TodoView({model: todo});
    this.$("#todo-list").append(view.render().el);
},
addAll: function() {
    Todos.each(this.addOne);
},

为什么当调用者没有在实例化的 AppView 对象的上下文中调用该函数时，该函数能够正确执行？

Answer 1

我刚刚解决了。我想到 this 默认引用 window 对象，并且由于 jQuery 全局注册了 $，即使使用以下函数调用，该函数也能工作没有上下文对象。

Answer 2

“如果页面上包含 jQuery 或 Zepto，则每个视图都有一个 $ 函数，用于运行视图元素范围内的查询。”

http://documentcloud.github.com/backbone/#View-dollar

上下文是addOne 和 addAll 具有相同的（视图），并且通过绑定调用中的第三个参数来实现。

Todos.bind('add',   this.addOne, this);
Todos.bind('reset', this.addAll, this);

http://documentcloud.github.com/backbone/#Events-bind

--编辑

嗯..那么，当 addOne 与每个绑定一起运行时，这些绑定是否确保了上下文？

addAll: function() {
  Todos.each(this.addOne);
},

Answer 3

对于未来的 Google 员工，此问题已在 GitHub 上提交，并修复已应用，但它并没有真正解决问题。

我认为解决这个问题的最好方法是让 addAll 函数将自己的 this 绑定到 .each 迭代，即

addOne: function(todo) {
  var view = new TodoView({model: todo});
  this.$("#todo-list").append(view.render().el);
},

addAll: function() {
  Todos.each(this.addOne, this); // notice the second parameter
},

我们可以这样做因为 Underscore.js _.each 函数有第三个选项（第二个，在我们的例子中）参数指定上下文迭代。

Answer 4

看一下 initialize 方法：

initialize: function() {
  this.input    = this.$("#new-todo");

  Todos.bind('add',   this.addOne, this);
  Todos.bind('reset', this.addAll, this);
  Todos.bind('all',   this.render, this);

  Todos.fetch();
}

bind 的第三个（可选）参数是调用回调的上下文。它记录在此处。 Backbone 中的实现位于此处：

callback[0].apply(callback[1] || this, args);