Question

刚刚开始学习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')");
    }
},

非常感谢任何解释。

Answer 1

在highlightHero事件之后成功调用

change:isHero并应用在DOM中反映的CSS类。但是，然后触发了change事件，导致View在没有应用CSS的情况下重新渲染，并且它太快注意到了。如果添加语法错误，则自应用程序崩溃后不会调用change事件。

要解决此问题，建议您在渲染功能中调用highlightHero并删除change:isHero事件。

不能将CSS应用于Backbone View

1 个答案: