如何对“类”进行数据绑定或“id” div 的属性，同时使用无容器控制流？

Question

我正在 Knockout 2.0.0 已发布 或 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>

如果我想要类似 < li class="${ name }">< /li>

使用模板时这很简单，但我现在无法使其工作。
我尝试过< li data-bind='class: name'>< /li>但徒劳。

我是新来的，请对我宽容一些。

Answer 1

您可以使用 css 绑定。它有两种用途。要么使用动态类（或类列表）：

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

要么使用与真值/假值绑定的单个类来指示是否应该在元素中添加/删除它们：

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

Answer 2

截至 2012 年中期，现在有 "css" 绑定可以直接绑定到类名。

例如：

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

Answer 3

以防万一，如果有人想知道如何将“css”属性与 id 属性一起使用，我同时使用“css”和 id 属性，对我来说，如果“css”属性不是第一个属性，则它不起作用，所以保留“ css”属性作为您的第一个属性。

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