CODEWITHSUNDEEP
javascriptbackbone.jsweb
user1118019
user1118019

Reputation: 3959

backbone js events binding

i have been going through the backbone js official documentations, but i can't seem to find an answer for this, below is a snippet from their website

var DocumentRow = Backbone.View.extend({

   tagName: "li",

  className: "document-row",

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

  render: function() {
  ...
}

});

what i don't understand is the events: section so what is it saying?

can someone explain the following in plain english or point out where in doc i can find 

   "click .icon":          "open",
   "click .button.edit":   "openEditDialog",
   "click .button.delete": "destroy",
   "click .list1 .item1" : "open",

??

thanks

Upvotes: 0

Views: 623

Answers (2)

hgmnz
hgmnz

Reputation: 13306

The events section literally delegates to JQuery (or whatever you're using):

"click .icon": "open"

binds the click event on any elements with a class of icon, scoped to your view's el, and will invoke the open function.

In JQuery speak:

$(el).on("click", ".icon", open)

Upvotes: 2

jmk2142
jmk2142

Reputation: 8581

It is basically linking your DOM events to your view methods.

Based on something like this...

var DocumentRow = Backbone.View.extend({

    tagName: "li",

    className: "document-row",

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

    open: function() {
        // The open something code here
    },
    openEditDialogue: function() {
        // Code to open edit dialogue
        var editDialogue = new EditDialogueView(); // etc.
    },
    destroy: function() {
        this.model.destroy();
    }

...

Your view el might look something like this.

<li class="document-row">
    <div class="list1">
        <img src="someSRC" class="icon" />
        <button class="edit">EDIT</button>
        <button class="delete">DELETE</button>
        <button class="open">OPEN</button>
    </div>
</li>

It doesn't have to look like this but I'm just recreating the DOM based on what the events declarations are.

In plain English, basically what this is saying is:

If I click on the element with class icon, run the open() method. If I click on the button element with class edit, run the openEditDialogue() method. If I click on the button element with class delete, run the destroy method. If I click on the element with class open, run the open() method.

So basically by creating that event: {} object and populating it with your event rules, the DOM elements the listeners will be attached to, and the handler (in this view class) you set up your basic view functionality.

Upvotes: 0

Related Questions