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只是一个方便的占位符 - 不是实际的DOMElements。您需要通过执行以下操作来更新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');
}

快速而简单......

绑定视图方法以动态更改视图的HTML类

2 个答案: