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

Use Backbone.View events method through a mixin

本文关键字：事件 方法 View Backbone mixin 使用 通过      更新时间：2023-09-26

我在应用程序中使用带有Coffeescript的Backbone。现在，我将使用的示例尽可能简单。我的应用程序中有一个标题，所有视图都共享它。此标头具有带有 #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 初始化时，首先调用初始化方法。

来自精细手册：

事件view.events或view.events()
[...]
Backbone 将在实例化时自动附加事件侦听器，就在调用 initialize 之前。

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

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

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函数和对象。

相关文章：