Knockout liant la classe CSS à une propriété de modèle observée

Question

Je veux lier une classe divs css à une propriété du modèle de vue comme ceci:

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

Mais cela génère le résultat:

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

Voici le modèle de vue:

 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);
    }
};
 

Donc, quand je charge la page qui utilise ce modèle de vue, je veux que la div soit:

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

Qu'est-ce que je fais mal?

Answer 1

Pour cette situation, vous pouvez faire:

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

Le seul inconvénient de cette méthode est qu'elle définira la classe directement plutôt que d'activer ou de désactiver une classe, donc si vous utilisez plusieurs classes, alors selectedPriority devront contenir la liste complète des classes.

Answer 2

Il semble que vous ne puissiez pas définir une classe directement à partir de votre modèle: http://knockoutjs.com/documentation/css-binding.html

Vous ne pouvez pas faire quelque chose comme ça:

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

Answer 3

Comme signalé dans les commentaires de @Chris Jaynes, knock-out 2.2.0 rend la configuration des noms de classe facile, comme détaillé dans un post de blog par Ko auteur Steve Sanderson.

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

Par la poste:

Nous avons aussi fait quelques fonctionnalités de plus que vous pouvez toujours avoir pensé qu'ils devraient travailler. Par exemple, le css de liaison pouvez désormais joindre par programme généré par les noms de classe CSS pour les éléments (auparavant, il a été limitée à basculement prédéfinis noms de classe CSS)

Le blog comprend également un jsfiddle vous pouvez jouer avec pour voir la liaison dans l'action. http://jsfiddle.net/qRmfH/light/

Remarque l' css syntaxe de liaison dans son exemple, css: chosenTicketCss, ce qui est un calculées observables qui retourne un nom de classe css:

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