web-dev-qa-db-fra.com

Comment lier des données à l'attribut 'class' ou 'id' d'un div, tout en utilisant un flux de contrôle sans conteneur?

J'essaie le grand nouveau flux de contrôle sans conteneur (nouvelle fonctionnalité numéro 2) sur Knockout 2.0.0 publié 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>

Et si je voulais quelque chose comme <li class = "$ {name}" > </ li>

C'était trivial lors de l'utilisation de modèles, mais je ne peux pas le faire fonctionner pour le moment.
J'ai essayé <li data-bind = 'class: name' > </ li> mais en vain.

Je suis nouveau ici, allez-y doucement avec moi.

knockout.js
47
nthapa

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

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

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

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

À la mi-2012, il y a maintenant la liaison "css" pour se lier directement au nom de la classe.

par exemple.:

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

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, pour moi cela n'a pas fonctionné si l'attribut "css" n'est pas le premier, alors gardez " attribut css "comme premier.

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

...
...
...

</div>
1
ATHER