뷰의 HTML 클래스를 동적으로 변경하기위한 뷰 바인딩 방법

Question

var foo = Backbone.View.extend({  
    tagName: 'div', 
    className: 'unselected', 
    events: { 
    'click div' : 'select' 
    }, 
    initiate: function() { 
    ._bindall(this, 'render' , 'select');  
    this.render(); 
    }, 
    render: function() { 
    $(this.el).html(_.template($("#template").html(),{...}); 
    return this; 
    }, 
    select: function() { 
    if (this.className == 'selected') { 
     this.className = 'unselected'; 
    } 
    else { 
     this.className = 'selected'; 
    } 
    this.render(); 
    } 
}); 

이 div 상자를 클릭하면 className이 올바르게 업데이트되지만 html은 업데이트되지 않습니다. 따라서 뷰의 className이 'selected'로 변경되지만 웹 페이지에서 div 상자 요소를 검사 할 때 여전히 'class = "unselected"를 읽습니다. 나는 html을 클릭 할 때 업데이트하고 싶다.

자습서/문서에 대한 조언이나 링크가 좋습니다.

Answer 1

Backbone.View은 단지 편리한 자리 표시 자입니다. 실제 DOMElements입니다.

select: function() { 

    if (this.className == 'selected') { 
    this.className = 'unselected'; 
    } 
    else { 
    this.className = 'selected'; 
    } 
    this.el.className = this.className; 
    this.render(); 
} 

Answer 2

가 무엇을 수행 할 수 있습니다 것은이 작업을 수행 할 수있는 엘 선택 자체에 대한 작업이며, 체인 JQuery와 toggleClass 호출을 사용 : 당신은이 라인을 따라 뭔가를 수행하여 this.el을 업데이트해야합니다. 당신은 한 줄에 모든 것을 할 수 있습니다 :

select : function() { 
    this.$el.toggleClass('selected').toggleClass('unselected'); 
} 

빠른을 쉽게 ...