CODEWITHSUNDEEP
javascriptbackbone.jsbackbone-views
Gautham Renganathan
Gautham Renganathan

Reputation: 645

How to pass arguments to functions binded in events object in backbone.js

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?

Upvotes: 6

Views: 8991

Answers (4)

Brendan Delumpa
Brendan Delumpa

Reputation: 1145

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

Upvotes: 5

Brian Reischl
Brian Reischl

Reputation: 7356

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

Upvotes: 0

Justin wong
Justin wong

Reputation: 638

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
}
......

Upvotes: 4

Claudiu Hojda
Claudiu Hojda

Reputation: 1051

If you know the type of the ID variable you can use javascript typeof() to check if true or you can check if ID is object with _.isObject from UnderscoreJS

Upvotes: 2

Related Questions