javascript - 通过混合使用 Backbone.View 事件方法

Question

我在一个应用程序中使用 Backbone 和 Coffeescript。现在，我将使用的示例尽可能简单。我的应用程序中有一个标题，所有 View 都共享它。此 header 具有带#logout 索引的注销链接。现在我要做的是将事件方法和事件在混合对象中触发时将使用它的方法放在一起，并扩展我的 Backbone View 的原型(prototype)。这是代码:

Mixin.Header =
  events: ->
    'click #logout': 'logout'

  logout: (e)->
    e.preventDefault()
    $.ajax(
      type: 'DELETE' 
      url: '/logout'
    ).then(
      ->
        document.location = ''
    )

class View extends Backbone.View
  initialize: (options)->
    _.extend(View.prototype, Mixin.Header)

我一直在查看 Backbone 源代码，但我根本找不到为什么它不起作用的问题。事件通过 delegateEvents() 方法委托(delegate)给 View ，当 View 初始化时，首先调用初始化方法。

Answer 1

来自fine manual :

events view.events or view.events()
[...]
Backbone will automatically attach the event listeners at instantiation time, right before invoking initialize.

您正在尝试在 initialize 中添加事件，但事件在 initialize 被调用之前被绑定(bind)。

您可以调用 delegateEvents在更新原型(prototype)后自己重新绑定(bind)事件:

initialize: (options)->
  _.extend(View.prototype, Mixin.Header)
  @delegateEvents() # <----------

但是结构会有点奇怪，因为您将在实例中修改类。

我认为你最好在拥有任何实例之前修改类:

class View extends Backbone.View
_.extend(View.prototype, Mixin.Header)

或者您可以为 prototype 使用 CoffeeScript 快捷方式:

class View extends Backbone.View
_.extend(View::, Mixin.Header)
# -----------^^

甚至:

class View extends Backbone.View
  _.extend(@::, Mixin.Header)

如果 View 有自己的 events，你仍然会遇到问题，因为 _.extend 会盲目地覆盖属性而不是合并它们。您需要比 _.extend 更聪明的东西来正确处理这个问题，它需要能够弄清楚如何合并 events 函数和对象。