Backbone 在一个事件中触发两种方法答案

【问题标题】：Backbone trigger two methods in one eventBackbone 在一个事件中触发两种方法
【发布时间】：2012-11-13 15:33:53
【问题描述】：

我正在使用 Backbone，并且我有一个定义了事件的视图：

    ....
    events: {
        'click .search-button': 'setModelTerm',
        'change .source-select': 'setModelSourceId',
        'change .source-select': 'activateSource'
    },
    ....

我想在事件change .source-select 触发时触发两种方法。问题是事件对象中的最后一个条目会覆盖前面的条目。
如何在一个事件中触发两种方法？
（我试图阻止编写另一个调用这两个方法的方法）

【问题讨论】：

标签： backbone.js backbone-views backbone-events

【解决方案1】：

您可以在您的事件哈希中传递一个包装函数来调用您的两个方法。

来自http://backbonejs.org/#View-delegateEvents

事件以{"event selector": "callback"} 的格式写入。这 callback 可以是视图中方法的名称，也可以是直接的函数体。

试试

events: {
    'click .search-button': 'setModelTerm',
    'change .source-select': function(e) {
        this.setModelSourceId(e);
        this.activateSource(e);
    }
},

【讨论】：

我特意写的！ “我试图阻止编写另一个调用这两种方法的方法”。
@Prasanna 你可以多次传递同一个目标函数，比如events: {'event1': 'name_of_function', 'event2': 'name_of_function'} 假设name_of_function 是在你的视图原型上定义的
谢谢，但我通过这种方式解决了事件：{'click #btn1,#btn2,': 'function'}
我不明白为什么主干允许多个事件一个函数而不是多个函数一个事件......

【解决方案2】：

唯一阻止您添加相同的事件/选择器对的是events 是一个哈希 - jQuery 可以处理多个绑定到相同的元素/事件对。不过好消息是，jQuery 事件允许您通过添加 .myNamespace 后缀来命名事件。实际上，这会产生相同的结果，但您可以生成许多不同的键。

var MyView = Backbone.View.extend({
  events: {
    'click.a .foo': 'doSomething',
    'click.b .foo': 'doSomethingElse'
    'click.c .foo': 'doAnotherThing', // you can choose any namespace as they are pretty much transparent.
  },

  doSomething: function() {
    // ...
  },

  doSomethingElse: function() {
    // ...
  },

  doAnotherThing: function() {
    // ...
  },
});

【讨论】：

这改变了生活
这里的无名英雄

【解决方案3】：

您认为的事件哈希只是一种方便的“DSL”。只需在 initialize 中手动绑定您的第二个事件。

events: {
    'click .search-button': 'setModelTerm'
},
initialize: function () {
    _.bindAll(this);
    this.on('click .search-button', this.doAnotherThing);
}

【讨论】：

这是错误的。使用 this.on 将 Backbone.Events mixin 绑定到视图而不是 DOM 事件。如果要手动添加 DOM 事件回调，请使用：this.$el.on('click', '.search-button', this.doAnotherThing);，这是 events 哈希在幕后所做的。
如果您希望它们与undelegateEvents 上的其余事件一起取消委派，请将此后缀添加到事件名称中：'click.delegateEvents' + this.cid
@KentWillis 你能用正确的代码发布答案吗？
找到了一种更好的方法来解决这个问题并将其发布为答案。但是，如果您仍想手动添加事件，请执行：this.$el.on('click.delegateEvents' + this.cid, '.search-button', this.doAnotherThing); 覆盖 delegateEvents。确保在覆盖开始时调用Backbone.View.prototype.delegateEvents.call(this);。这将使视图与其他事件一起管理此自定义 DOM 事件回调。