How to data-bind the 'class' or 'id' attribute of a div, while using containerless control flow?

Question

I am trying out the great new containerless control flow (new feature number 2) at Knockout 2.0.0 released or 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>

What if i wanted something like < li class="${ name }">< /li>

This was trivial while using templates, but i cannot make it work right now.
i tried < li data-bind='class: name'>< /li> but in vain.

I'm new here, please go easy on me.

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'}"