Howto Bind A Click Event In A Backbone Subview

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'

Solution 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 !!

Solution 2:

You have kind of disabled backbones natural behavior by introducing your parentEl property and circumventing the creation of a view element. You basically never wire up the views `elz property to anything.

If I get your code right, the TenantView is a single list item in a list of tenants.

In your TenantView you can do this to leverage backbones built in events:

render: function() {
    this.setElement(this.template.render(this.model));
    $(this.parentEl).children('ul').append(this.$el);
    return this;
}

The setElement function will use the return value of you template function to wire up the views element and also setup the events for you. In the documentation it is suggested to use setElement in favor of just assigning something to the el property. There is also the nifty $el property which will contain a cached jQuery (or Zepto) object of your view's element.

To go more in the backbone way personally I would consider something like this:

var TenantView = Backbone.View.extend({
    // =========
    // = Setup =
    // =========

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

    template: new EJS({
        url: '/scripts/templates/tenant.ejs'
    }),

    // =============
    // = Lifecycle =
    // =============

    initialize: function(model, options) {
        this.render();
    },

    render: function() {
        var content = this.template.render(this.model);
        this.$el.html(content);
        return this;
    },

    // ==========
    // = Events =
    // ==========

    setActive: function(event) {
        return this.model.set('active', true);
    }

});


var TenantList = Backbone.View.extend({

    // =========
    // = Setup =
    // =========

    id: "tenantList",
    tagName: "ul",

    // =============
    // = Lifecycle =
    // =============

    initialize: function() {
        this.render();
    },

    render: function() {
        if (this.collection.length > 0) {
            this.renderChildren();
        }
    },

    renderChildren: function() {
        var that = this;

        this.collection.each(function(tenant) {
            that.$el.append(new TenantView(tenant).$el);
        });
    }
});