Comment les données-bind l'attribut « classe » ou « id » d'une div, tout en utilisant le flux de contrôle sans conteneur?

Question

J'essaie le nouveau grand flux de contrôle sans conteneur (nouveau numéro de fonction 2) knock-out 2.0.0 libéré ou http://jsfiddle.net/ StevenSanderson / 8vms5 / lumière

<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

class = "$ {name}" >

est trivial en utilisant des modèles, mais je ne peux pas le faire fonctionner en ce moment.
J'ai essayé

données bind =. 'classe: nom' >

mais en vain

Je suis nouveau ici, s'il vous plaît allez-y doucement sur moi.

Answer 1

You can use the css binding. It can be used two ways. Either with a dynamic class (or list of classes):

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

or with individual classes bound against truthy/falsy values to indicate whether that are should be added/removed from the element:

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

Answer 2

As of mid-2012, there is now the "css" binding to bind directly to class name.

e.g.:

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

Answer 3

Just in case if someone is wondering how to use "css" attribute with id attribute, i was using both "css" and id attributes, for me it did't work if "css" attribute is not the first one , so keep "css" attribute as your fist one.

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

...
...
...

</div>

Answer 4

data-bind="attr:{ id:isConditionTrue()<=0 ?'test1':'test2'}"