Lets say I got this view:

var HomeView = Backbone.View.extend({
    el: '#application',
    initialize: function() {
        this.template = template; // Comes from requireJS (not relevant)
        this.$elements = {};
    },
    render: function() {
        this.$el.html(this.template);

        this.$elements = {
            signIn: {
                email: $('#sign-in-email'),
                password: $('#sign-in-password')
            }
        };

        // Demonstration.
        this.$elements.signIn.email.myPluginInit();
        this.$elements.signIn.password.myPluginInit();

        //
        // NOTE: How to handle the events?
        //
    }
});

I have the this.$elements object, which will contain all the objects of my DOM there, how can I put events on them because with this solution they are variable. This is what I used to do (see backbone).

var HomeView = Backbone.View.extend({
  events: {
    'click #sign-in-email': 'clickedSignInEmail',
    'focus #sign-in-password': 'focusSignInPassword'
  }
});

Lets say I got this view:

var HomeView = Backbone.View.extend({
    el: '#application',
    initialize: function() {
        this.template = template; // Comes from requireJS (not relevant)
        this.$elements = {};
    },
    render: function() {
        this.$el.html(this.template);

        this.$elements = {
            signIn: {
                email: $('#sign-in-email'),
                password: $('#sign-in-password')
            }
        };

        // Demonstration.
        this.$elements.signIn.email.myPluginInit();
        this.$elements.signIn.password.myPluginInit();

        //
        // NOTE: How to handle the events?
        //
    }
});

I have the this.$elements object, which will contain all the objects of my DOM there, how can I put events on them because with this solution they are variable. This is what I used to do (see backbone).

var HomeView = Backbone.View.extend({
  events: {
    'click #sign-in-email': 'clickedSignInEmail',
    'focus #sign-in-password': 'focusSignInPassword'
  }
});

• javascript
• backbone.js

• 1 Sounds like you should have a different view structure, you'd use different sub-views depending on what widgets you need on the page. Then your sign-in events would be bound to a sub-view and you wouldn't have variable events. – mu is too short Commented Dec 7, 2012 at 19:01

2 Answers 2

Using delegateEvents provides a number of advantages over manually using jQuery to bind events to child elements during render. All attached callbacks are bound to the view before being handed off to jQuery, so when the callbacks are invoked, this continues to refer to the view object. When delegateEvents is run again, perhaps with a different events hash, all callbacks are removed and delegated afresh — useful for views which need to behave differently when in different modes.

Example code:

initialiaze: function () {
  // …
  this.events = this.events || {};
  // dynamically build event key
  var eventKey = 'click ' + '#sign-in-email';
  this.events[eventKey] = 'clickedSignInEmail';
  this.delegateEvents();
  // …
}

How about using the normal jQuery event handling syntax?

this.$elements.signIn.email.click(this.clickedSignInEmail);
this.$elements.signIn.password.focus(this.focusSignInPassword);

You can also use the Backbone.View.delegateEvents method, but that requires you to construct the events hash from your selectors.