无法将 CSS 应用于主干视图答案

【问题标题】：Cant apply CSS to Backbone View无法将 CSS 应用于主干视图
【发布时间】：2014-03-28 14:58:09
【问题描述】：

刚开始学习 Backbone，所以这可能是我完全误解了一个核心概念。

下面的代码来自我的 View 对象，有一些我不明白的地方......

为什么对 highlightHero 函数的 CSS 更改不起作用。如果我做一个
```
console.log(this.$el.children(".playerIcon"))
```
之后我可以在 outerHTML 属性中看到适当的样式已添加到对象中，但它没有对 DOM 中的元素进行更改。
为什么如果我在 highlightHero 的底部插入一个故意的语法错误，整个事情就会完美运行，尽管也会引发异常。

initialize: function(){
    this.model.on('change', this.render, this);
    this.model.on('change:isHero', this.highlightHero, this);       
},

events: {
    'click .playerIcon': 'toggleHero'
},

toggleHero: function(){
    this.model.toggleHero();//This just toggles a boolean
},

highlightHero: function(){
    if(this.model.get('isHero')==true)
    {
        this.$el.children(".playerIcon").css("background-image", "url('/imgs/user-red.png')");
        console.log(this.$el.children(".playerIcon"))
    }
    else
    {
        this.$el.children(".playerIcon").css("background-image", "url('/imgs/user.png')");
    }
},

任何解释都非常感谢。

【问题讨论】：

你是在渲染后调用这个吗？
初始渲染是从另一个View调用的，每次模型从initialize函数改变时也应该调用render。如果我在 highlightHero 的底部调用 this.render 它仍然不起作用。

标签： javascript css backbone.js backbone-views

【解决方案1】：

highlightHero 在change:isHero 事件之后被成功调用，并应用了反映在 DOM 中的 CSS 类。然而，随后change 事件被触发，导致视图在没有应用 CSS 的情况下重新渲染，并且太快了以至于无法注意到。如果添加语法错误，则不会调用 change 事件，因为应用程序崩溃了。

要解决这个问题，我建议在您的渲染函数中调用highlightHero 并删除change:isHero 事件。

【讨论】：

太棒了，这解决了它。谢谢！