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

Question

Is it possible to bind function arguments for listenTo callback?

I've till now added a wrapper methods 'myHandler' which I would like to get rid of:

// 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);
},

What I want to do is something like:

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);
}

Answer 1

listenTo is accepting only 3 arguments. If you need to bind function to some object then cross-browser way to do this is using underscore _.bind function:

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

However it's mostly not needed as object you are calling listenTo on is the default context. To read more see these github issues:

• https://github.com/documentcloud/backbone/issues/1946
• https://github.com/documentcloud/backbone/issues/2015

Answer 2

Why not just use a function in your listenTo function call? Like so:

// 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);
  }, 

Answer 3

Underscore is a hard dependency for Backbone which means you can use _.bind to set the context:

bind _.bind(function, object, [*arguments])
Bind a function to an object, meaning that whenever the function is called, the value of this will be the object. Optionally, pass arguments to the function to pre-fill them, also known as partial application.

Your example could be written as

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

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

If you want the context as the first argument to your function, add it as a third argument to _.bind

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

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

Answer 4

是的，您可以使用JQuery $ .proxy中的代理函数（this.controller.handler，this）来执行此操作。请参阅此处的文档http://api.jquery.com/jQuery.proxy/