BackboneJS, view and its events

Written by - Saumya

20 January 2014

Working in BackboneJS is fun and easy to begin with. Slowly but steadily it gets complicated as we move on and add more to the project. Being said that, BackboneJS is not at all opinionated. So there is no rightway of doing something. If your solution works for your project, then its good to go. Well, then there are certain things, which may help you, better organise your code. One of such things is View Events. In a Backbone view, to listen to events and handle them, the general syntax is as this.

events:{
        "click": "onClick"
        },
onClick: function(event){
    //Do something with the event
    //or
    //specifically do it for a target
    var btnID = event.target.id;
    if(btnID==='btn_one'){
        console.log('TODO:');
    }
}

Well, it may be easier at first, but we are listening for events for the whole view and then in the handler checking it. There is a way in BackboneJS that directly and listens for events for that particular target. The code looks as this.

events:{
        "click #btn_one": "onClick"
        },
onClick: function(event){
    //btn_one is clicked
    //Do something with the event
}

Happy coding.