Question

We are working on a web app with the Django framework and we are using Backbone.js for MV decomposition. We have a view and call render on it, which swaps out a div#main with new content, like this:

var GoalListView = Backbone.View.extend({
el: $('#main'),

template: _.template($("#swap").html()),

render: function() {
  $(this.el).html(this.template());
  return this;
}

});

This works as we expect (changing the page with the contents of the template), but in the next View we create, we are unable to access any of these new DOM elements.

 el: $('#newId') 

gives us undefined, even though we have an element with id newId in the template we swapped in. The template swap has already occurred at this point though, so why are we unable to access the new elements?

EDIT: Thanks, I agree it’s a timing issue. But what about for events?

events: {
    'keypress #goal-entry': 'createOnEnter'
 },

Then there’s no option to search the DOM for the elem to attach the event to, right?

Answer 1

You have to be sure that $('#newId') is in the DOM already if you are assigning it to el. In our case, if you insert element used for the second view, you don’t need to define it initially but must pass it to initialize():

var SomeView = Backbone.View.extend({
  // do NOT define el or $el or id here
  initialize: function($el) {
    this.$el = $el;
    ... go on do more things...
  }
});

and then init the second view from wherever you need in the app:

var someView = new SomeView($('#someID'));