Backbone：如何绑定listenTo-callback的参数？答案

【问题标题】：Backbone: How to bind arguments for listenTo-callback?Backbone：如何绑定listenTo-callback的参数？
【发布时间】：2013-04-30 07:11:42
【问题描述】：

是否可以为listenTo回调绑定函数参数？

到目前为止，我已经添加了一个包装方法“myHandler”，我想摆脱它：

// Basic marionette layout
var view = Marionette.Layout.extend({

initialize: function() {
    // wrapping view logic inside a custom object
    this.controller = new MyViewController(); 
},

// creates a sub view and adds event handlers
someFunc: function() {
    var subView = new MySubView();

    // HERE: how to bind args for callback?
    this.listenTo(subView, "myEvent", this.myHandler, this);
}, 

// this is a dummy wrapper that I want to remove
myHandler: function(e) {
    this.controller.handleIt(this, e);
},

我想做的是这样的：

someFunc: function() {
    var subView = new MySubView();

    // here wrapIt binds 'this' as first argument for handleIt
    this.listenTo(subView, "myEvent",
        wrapIt(this.controller.handleIt, this), this);
}

【问题讨论】：

this.controller.handleIt 是什么？
@Qantas94Heavy 这是一个用于包装视图逻辑的 FSM：javascript-state-machine
这些答案有帮助吗？

标签： javascript backbone.js marionette

【解决方案1】：

listenTo 只接受 3 个参数。如果您需要将函数绑定到某个对象，那么跨浏览器的方法是使用下划线 _.bind 函数：

this.listenTo(subView, "myEvent", _.bind(this.myHandler, this))

但是，由于您调用listenTo 的对象是默认上下文，因此大多数情况下不需要它。要了解更多信息，请参阅这些 github 问题：

【讨论】：

【解决方案2】：

为什么不在listenTo 函数调用中使用一个函数？像这样：

// Basic marionette layout
var view = Marionette.Layout.extend({

  initialize: function() {
    // wrapping view logic inside a custom object
    this.controller = new MyViewController(); 
  },

  // creates a sub view and adds event handlers
  someFunc: function() {
    var subView = new MySubView();

    this.listenTo(subView, "myEvent", function (e) {
      this.controller.handleIt(this, e);
    }, this);
  },

【讨论】：

这是一个过时的解决方案，listenTo 方法的第 4 个参数已从主干核心中删除：github.com/jashkenas/backbone/issues/2015 您可以改用 _.bind()

【解决方案3】：

下划线是 Backbone 的硬依赖，这意味着您可以使用 _.bind 来设置上下文：

绑定 _.bind(function, object, [*arguments])
将函数绑定到对象，这意味着每当调用该函数时，这将是对象。（可选）将参数传递给函数预填充它们，也称为部分应用。

你的例子可以写成

someFunc: function() {
    var subView = new MySubView(),
        callback = _.bind(this.controller.handleIt, this);

    this.listenTo(subView, "myEvent", callback, this);
}

如果您希望上下文作为函数的第一个参数，请将其作为第三个参数添加到 _.bind

someFunc: function() {
    var subView = new MySubView(),
        callback = _.bind(this.controller.handleIt, this, this);

    this.listenTo(subView, "myEvent", callback, this);
}

【讨论】：

【解决方案4】：

是的，您可以使用 JQuery 中的代理功能来做到这一点 $.proxy(this.controller.handler, this) 在此处查看文档 http://api.jquery.com/jQuery.proxy/

【讨论】：