Question

Is it necessary to select the same DOM element and do something to it for every Backbone View that is rendered? Only one of this View exists at any one time.

For example, say Bootstrap’s Tabs (tabbable plugin) have to be used on a particular backbone View Product. Is it correct to include the tabbable plugin’s initilization code in the render function?

render: function() {

    this.$el.html( this.template( this.model.toJSON() ) );

    // Activate Twitter Bootstrap Tabs
    $('.tab-bar').tab();
    $('.tab-bar .tab:first').tab('show');
    $('.tab-bar .tab').click(function(e) {
        e.preventDefault();
        $(this).tab('show');    });

    return this;
}

Or is there a way to just call this selector once, and it will fire for all elements with class .tab-bar including those that have yet to exist.

Similarly, if I want a click handler on the first tab

$('.tab:first').click(function(){
    console.log('hey!')'
}

do I place it in that view’s render function? If I do, wont it create many click event listeners if the view is rendered multiple times?

Answer 1

You need to bind event listeners in the initialize method, not in the render. Unless you’re going to re-render the DOM element more than once.

EDIT

window.myView = Backbone.View.extend({

    events: {
        'click #someElementID': 'do_something',
    },

    initialize: function(){
        _.bindAll(this, 'render', 'do_something');
    },

    .....

    do_something: function(e){
        console.log("A click was made!", e.currentTarget);
    }

});