如何将参数传递给backbone.js中events对象中绑定的函数

Question

I need to have arguments to the functions used in the events object in Backbone.

var DocumentRow = Backbone.View.extend({

    tagName: "li",

    className: "document-row",

    events: {
        "click .icon": "open",
        "click .button.edit": "openEditDialog",
        "click .button.delete": "destroy"
    },

    render: function () {
        // do something
    }
});

Now let the definition of open be:

function open(id) {
    if (id) {
      // do something
    } else {
      // do something else
    }
}

I will call open from another function and will pass id when I call it. So based on whether I pass id or not I need to do different things. How do I do this in Backbone? Currently, id when called via click I expect it to be undefined. But an event object is passed.

Why does this happend and how can I pass an argument?

Answer 1

Another way to approach this is to use a completely different method that handles the click, and calls "open" so it can be called by another process. As another person mentioned, methods you specify in the events hash are jquery delegate wrappers, so there's not much you can do with respect to params as what you'll get is what delegate provides. So in that case, create another method that does the actual icon click that will invoke open:

events: {
    "click .icon": "open",
    "click .button.edit": "openEditDialog",
    "click .button.delete": "destroy"
},
/**
* Specifically handles the click and invokes open
*/
handleIconClick : function(event) {
    // ...process 'event' and create params here...
    this.open(params);
},
/**
* This can be called remotely
*/
open : function(id) {
    if (id) {
      // do something
    } else {
      // do something else
    }
}

Answer 2

you can see here: http://backbonejs.org/docs/backbone.html#section-156

The most critical sentence is：

this.$el.delegate(selector, eventName, method);

because backbone's events is jquery's delegate( http://api.jquery.com/delegate/ ),so the parameter is passed just is jquery's delegate default parameters passed.

you can update your code like this:

......

open : function(event) {
    //get id from event 
    var id = event.xxx ;//pseudo code
    if (id) {
      this.openid(id);
    } else {
      // do something else
    }
},
//your another function direct call openid
openid: function(id){
    // do something
}
......

Answer 3

如果您知道ID变量的类型，您可以使用javascript typeof()来检查是否为true，或者您可以使用来自UnderscoreJS的_.isObject检查ID是否为对象

Answer 4

I think Brendan or fejustin's answers are the best (actually I voted for them). But if you're really committed to having just one function, you could make id the second parameter and ignore the first one.

open : function(evt, id){
  if(id){
     //whatever
  } else {

  }
},

someOtherMethod : function(){
  this.open(null, id);
}