Question

I’m having problems understanding the event binding in a Backbone subview. My view is defined as follows:

TenantView = Backbone.View.extend({
  events: {
    "click": "setActive"
  },
  initialize: function() {
    this.parentEl = this.options.parentEl;
    return this.render();
  },
  template: new EJS({
    url: '/scripts/templates/tenant.ejs'
  }),
  render: function() {
    $(this.parentEl).children('ul').append(this.template.render(this.model));
    return this;
  },
  setActive: function(event) {
    return this.model.set('active', true);
  }
});

The template simply consists of an li containg an a. Done this way, clicks events on my view are not catched, my method setActive is never triggered.

When I extend my view by an el property like el: 'li' one of my (2) views acts properly and triggers the setActive function. The second view does not react at all. If I insepct the el property during the views initialization, the working view’s el property points to the right li, the failing views el points to the first li that can be found in the page.

As one can see, I am totally lost when it comes to the meaning of the el property.

Question is, how can I bind a click on view to this very views setActive function?

Can anyone enlighten me please?

Regards
Felix

Answer 1

First thing, you may read documentation and this. Explanation about el is given there.

As TenantView has parentEl property, I’m assuming it is being rendered from some parent_view. I would suggest some approach like below and give it a try.

var ChildView = Backbone.View.extend({
  tagName : "li", // change it according to your needs

  events : {
    "click": "setActive"
  },

  initialize : function() {
    _.bindAll(this, "setActive");
    // code to initialize child_view
  },

  render : function() {
    // as I'm not familiar with the way you are using template, 
    // I've put simple call to render template, but it should render the
    // content to be kept inside "li" tag
    this.$el.html(this.template()); 

    return this;
  },

  setActive : function(event) {
    // code to be executed in event callback
  }
});


var ParentView = Backbone.View.extend({
  el : "#parent_view_el",

  initialize : function() {
    // parent view initialization code
  },

  render : function() {
    // a place from where ChildView is initialized
    // might be a loop through collection to initialize more than one child views
    // passing individual model to the view

    var child_view = new ChildView();

    this.$("ul").append(child_view.render().$el); // equivalent to this.$el.find("ul")

    return this;
  }
});

Hope it helps !!