Question

var foo = Backbone.View.extend({    
  tagName: 'div',
  className: 'unselected',
  events: {
    'click div' : 'select'
  },  
  initiate: function () {
    ._bindall(this, 'render' , 'select' );    
    this.render();
  },
  render: function () {
    $(this.el).html(_.template($("#template").html(),{...});
    return this;
  },
  select: function () {
    if ( this.className == 'selected' ) {
      this.className = 'unselected';
    }
    else {
      this.className = 'selected';
    }
    this.render();
  }
});

When I click on this div box, the className is updated correctly, but the html is not updated. Therefore, the className of the view will change to ‘selected’ but when I inspect the div box element on the webpage it still reads ‘class=”unselected”.’ I would like the html to be updated when I click as well.

Advice or links to tutorial/docs would appreciated.

Answer 1

Backbone.Views are just a handy placeholder–not actual DOMElements. You will need to update this.el by doing something along these lines:

select: function () {

  if ( this.className == 'selected' ) {
    this.className = 'unselected';
  }
  else {
    this.className = 'selected';
  }
  this.el.className = this.className;
  this.render();
}