綁定視圖方法動態更改視圖的HTML類

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。綁定視圖方法動態更改視圖的HTML類

建議或教程/文檔的鏈接將不勝感激。

來源

2012-07-11 Asher Garland

Backbone.View s只是一個方便的佔位符 - 不是真正的DOMElements。你需要做下面幾行內容更新this.el：

select: function() { 

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

來源

2012-07-11 21:20:47 rjz

問題解決了，謝謝 – 2012-07-12 01:50:06

我試圖做同樣的事情，你在哪裏插上這個代碼？謝謝。 – timeon 2013-10-18 20:42:41

什麼，你可能想要做的是對EL選擇自己做這項工作，並使用jQuery的鏈式調用toggleClass。你可以做到這一切在同一行：

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

方便快捷......

來源

2012-07-12 00:18:59

綁定視圖方法動態更改視圖的HTML類

回答

相關問題