Recently started diving into the world of Backbone, and it seems like I might be missing a key concept here.
In my View object, there's a snippet of code that's puzzling me...
First off, I can't figure out why the CSS change in the highlightHero function isn't taking effect. Even though a
console.log(this.$el.children(".playerIcon"))
statement reveals that the style has been applied to the element in question, it doesn't reflect on the actual DOM element.
Secondly, if I consciously introduce a syntax error at the end of the highlightHero function, everything miraculously starts working flawlessly, albeit with an exception being thrown as well.
.
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 simply toggles a boolean value
},
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')");
}
},
Would greatly appreciate any insight or explanation regarding these issues.