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>