Comment lier les attributs 'class' ou 'id' d'un div en utilisant un flux de contrôle sans conteneur?

Question

Je suis en train de la grande nouvelle containerless flux de contrôle (nouvelle fonctionnalité numéro 2) au knock-out 2.0.0 publiée ou http://jsfiddle.net/StevenSanderson/8vms5/light

<ul>
    <li><strong>Here is a static header item</strong></li>
    <!-- ko foreach: products -->
    <li>
        <em data-bind="text: name"></em>
        <!-- ko if: manufacturer -->        
           &mdash; made by <span data-bind="text: manufacturer.company"></span>
        <!-- /ko -->
    </li>
    <!-- /ko -->
</ul>

Que faire si je voulais quelque chose comme < li class="${ nom }">< /li>

C'était trivial, tout à l'aide de modèles, mais je ne peux pas le faire fonctionner maintenant.
j'ai essayé < li data-bind= "class: nom'>< /li> mais en vain.

Je suis nouveau ici, s'il vous plaît aller facile sur moi.

Answer 1

Vous pouvez utiliser la liaison css . Il peut être utilisé de deux manières. Soit avec une classe dynamique (ou une liste de classes):

 <li data-bind="css: name"></li>
 

ou avec des classes individuelles liées à des valeurs de vérité / fausseté pour indiquer si elles doivent être ajoutées / supprimées de l'élément:

 <li data-bind="css: { classOne: hasClassOne, classTwo: hasClassTwo }"></li>
 

Answer 2

À partir de la mi-2012, il existe désormais une liaison "css" permettant une liaison directe au nom de la classe.

par exemple:

 <li data-bind="css: className">**content**</li>
 

Answer 3

Juste au cas où quelqu'un se demanderait comment utiliser l'attribut "css" avec l'attribut id, j'utilisais à la fois les attributs "css" et id, cela ne fonctionnait pas si l'attribut "css" n'était pas le premier, alors gardez " css "attribue comme votre premier poing.

 <div class="panel-collapse collapse" data-bind="css:{in:$index()==0}, attr: { id:'collapse'+$index()} ">

...
...
...

</div>