Question

Some extremely simple problem for those experienced with backbone,
but still, an answer here would very helpeful. Not looking for an functional answer, but more about what’s really happening on this specific example.

With the following code (some simple add/remove from favorite)

render: function() {
    $(this.el).html(this.model.get('name'));
    $(this.el).append("<span class='unfav'>remove</span>");
    $(this.el).append("<span class='fav'>add</span>");
    if( this.model.get("selected") == true ){
        $(this.el).addClass("selected");
    } // Should we really need to have an 'else' conditions here that removes the clas :( ? sound weird to me.
    return this;
}

Full code here http://jsfiddle.net/eHAfY/3/
(thanks to @cymen for the codebase)

After adding an element,

Don’t get why the item gets changed when I click on ‘Add’, and does not when I click on remove : if there is a condition that have effect when true, why it is the class’ still here when false ?

Answer 1

Your render method wipes its inner HTML with $(this.el).html(...); which is what render methods are usually expected to do.

With $(this.el).addClass("selected"); you modify the external container only when model.selected is true, and your view has no way to know that it should remove this class when the condition is false.