Методы привязки представления для динамического изменения класса HTML представления

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();
  }
});

Когда я нажимаю на это поле div, className обновляется правильно, но HTML не обновляется. Следовательно, className представления изменится на "selected", но когда я проверяю элемент div box на веб-странице, он все равно читает "class="unselected". Я хотел бы, чтобы HTML тоже обновлялся, когда я нажимал.

Советы или ссылки на учебник / документы будут оценены.

Answer 1

Backbone.ViewЭто просто удобный заполнитель -не фактические элементы DOME. Вам нужно будет обновить this.el делая что-то вроде этого:

select: function () {

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

Answer 2

Для этого вам может потребоваться работа над самим селектором el и использовать цепочечные вызовы jquery toggleClass. Вы можете сделать все это в одну строку:

select : function() {
    this.$el.toggleClass('selected').toggleClass('unselected');
}

Быстро и просто...