Backbone js dynamic events with variables

Question

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.org).

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

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
– mu is too short, Commented Dec 7, 2012 at 19:01

Misha Reyzlin · Accepted Answer · 2012-12-07 11:40:54Z

8

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();
  // …
}

answered Dec 7, 2012 at 11:40

Misha Reyzlin

13.9k4 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Lokk Over a year ago

Better to clone events before applying changes to them inside initialize(): this.events = _.clone(this.events) | {}. Otherwise, you'll change global events object, if you defined it. Which is not cool, and will lead to wrong additional event triggering sometimes.

Misha Reyzlin Over a year ago

But this.events is going to be specific to the instance of view and then it's exactly what you want to do – you don't want each object to have its own events property, you want to change the prototype.

Alex Lokk Over a year ago

Ok. In my own particular case, I actually needed own events for each view instance. But isn't it strange to change prototype from inside of initialize?

Misha Reyzlin Over a year ago

Well perhaps it a good idea to mention it in a comment. Maybe also to make it more obvious a good idea would be to do this.constructor.prototype.events.

jevakallio · Accepted Answer · 2012-12-07 11:33:33Z

1

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.

answered Dec 7, 2012 at 11:33

jevakallio

36k4 gold badges109 silver badges114 bronze badges

2 Comments

onlineracoon Over a year ago

It works, but that will become a lot of code since this.clickedSignInEmail isn't working, that will replace the "this" value in the "clickedSignInEmail" function, so I have to do "this.$elements.signInEmail.click(function() { self.clickedSignIn; })"

jevakallio Over a year ago

You can force bind the context by doing this in your initialize: _.bindAll(this);

Collectives™ on Stack Overflow

Backbone js dynamic events with variables

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related