通过mixin使用Backbone.View事件方法

时间:2016-02-20 18:31:30

标签: javascript events backbone.js coffeescript mixins

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

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()方法委托给View,当初始化View时,首先调用initialize方法。

1 个答案:

答案 0 :(得分:2)

来自fine manual

  

活动 proxy_pass "http://domian.com/resize/"; proxy_set_header Host domian.com; view.events
  [...]
  在调用view.events()之前,Backbone将在实例化时自动附加事件侦听器。

您尝试在initialize中添加事件,但在调用 initialize之前事件已绑定

您可以在更新原型后自行调用delegateEvents来重新绑定事件:

initialize

但结构会有点奇怪,因为你要在实例中修改类。

我认为在你有任何实例之前修改这个类会更好:

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

或者您可以使用class View extends Backbone.View _.extend(View.prototype, Mixin.Header) 的CoffeeScript快捷方式:

prototype

甚至:

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

如果class View extends Backbone.View _.extend(@::, Mixin.Header) View events作为_.extend盲目覆盖属性而不是合并它们,您仍会遇到问题。你需要比_.extend更聪明的东西来正确处理这个问题,它需要能够弄清楚如何合并events函数和对象。