Question

Backbone的事件系统有问题。

是否可以直接将jquery函数作为回调传递？

以下代码不会显示/隐藏方法：

initialize: function () {
  this.render();
  this.logoutButton = $('#logout-button');
  this.logoutButton.hide();
  this.listenTo(this.model, 'loginSuccessEvent', this.logoutButton.show);
  this.listenTo(this.model, 'logoutSuccessEvent', this.logoutButton.hide);
},

但如果我将其更改为此，则效果非常好：

initialize: function () {
  this.render();
  this.logoutButton = $('#logout-button');
  this.logoutButton.hide();
  this.listenTo(this.model, 'loginSuccessEvent', this.showButton);
  this.listenTo(this.model, 'logoutSuccessEvent', this.hideButton);
},

showButton: function () {
  this.logoutButton.show();
},

hideButton: function () {
  this.logoutButton.hide();
}

Answer 1

来自fine manual：

listenTo object.listenTo(other, event, callback)
  [...]
  始终会以callback作为上下文调用object。

所以当你这样说时：

this.listenTo(this.model, 'loginSuccessEvent', this.logoutButton.show);

你真的在说：

var show = this.logoutButton.show;
this.listenTo(this.model, 'loginSuccessEvent', show);

然后Backbone会或多或少地调用show：

your_view.show(arg, ...);
// Or internally:
show.apply(your_view, arguments);

因此当show（jQuery＆＃39; s show）被调用时，其this将是您的视图，而不是logoutButton。请记住，JavaScript函数中的this取决于函数的调用方式而不是函数的定义（当然，绑定函数除外）。

你有一些选择：

使用您的showButton和hideButton功能。

使用匿名函数：

this.listenTo(this.model, 'loginSuccessEvent', function() {
    this.logoutButton.show();
});

使用bound function：
```
this.listenTo(this.model, 'loginSuccessEvent', this.logoutButton.show.bind(this.logoutButton));
```
请注意，show将使用listenTo通常使用的参数进行调用，因此您可能需要向bind提供更多参数，以避免混淆show和hide他们没有预料到的论点。

Backbone listenTo不会将jquery函数作为处理程序触发

1 个答案: