不能在主干视图中应用CSS

Cant apply CSS to Backbone View

本文关键字：应用 CSS 视图 不能      更新时间：2023-09-26

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

下面的代码来自我的视图对象，有一些事情我不明白…

  1. 为什么CSS改变highlightHero函数不工作。如果我输入

    console.log(this.$el.children(".playerIcon"))

    之后，我可以在outerHTML属性中看到适当的样式已经添加到对象中，但它还没有对DOM中的元素进行更改。

  2. 为什么如果我在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')");
    }
},

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

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

相关文章：