Binding View Methods to Dynamically Change View's HTML Class
===


    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.