Knockout legame classe CSS a una proprietà modello osservato

Question

voglio legare una classe div css per una proprietà del modello di vista in questo modo:

<div id="statusIndicator" data-bind="css: selectedPriority"> 

Ma questo genera il risultato:

<div id="statusIndicator" class=" 0 1 2 3"> 

Questo è il modello di visualizzazione:

myViewModel = { 
    selectedPriority: ko.observable('High'), 
    Company: ko.observable("Bert"), 
    Rows: ko.observableArray([ 
     new row(), 
     new row(), 
     new row() 
    ]), 
    Tabs: ['High', 'Medium', 'Low'], 

    selectPriority: function (tab) { 
     this.selectedPriority(tab); 
    } 
}; 

Quindi quando carico la pagina che utilizza questo modello di vista voglio che div diventi:

<div id="statusIndicator" class="High"> 

Cosa sto facendo di sbagliato?

Answer 1

Per questa situazione si può fare:

<div data-bind="attr: { 'class': selectedPriority}"> 

L'unico svantaggio di questo metodo è che imposterà la classe direttamente anziché attivare o disattivare una classe, quindi se si utilizzano più classi, quindi selectedPriority è necessario contenere l'elenco completo di classi.

Answer 2

Sembra che non è possibile impostare una classe direttamente dal tuo modello: http://knockoutjs.com/documentation/css-binding.html

Non si può fare qualcosa di simile:

<div data-bind="css: { high: selectedPriority() == 1, medium: selectedPriority() == 2}"> 

Answer 3

Come accennato nei commenti di @Chris Jaynes, Knockout 2.2.0 semplifica l'impostazione dei nomi delle classi, come descritto in un post sul blog dall'autore di Knockout Steve Sanderson.

http://blog.stevensanderson.com/2012/10/29/knockout-2-2-0-released/

Come per la posta:

Abbiamo anche fatto alcune caratteristiche lavorare di più come si potrebbe sempre avere pensano che dovrebbero funzionare. Ad esempio, il legame css possono ora collegare nomi delle classi CSS a livello di codice generati da elementi (in precedenza, è era limitato a nomi di classe CSS predefiniti non girevoli)

Il post sul blog include anche un jsfiddle si può giocare con a vedere l'associazione in azione. http://jsfiddle.net/qRmfH/light/

Nota la css sintassi di associazione nel suo esempio, css: chosenTicketCss, che è un computed observable che restituisce un nome di classe CSS:

<p data-bind="visible: chosenTicket, css: chosenTicketCss"> 
    Excellent choice! Suits you perfectly. 
</p>