在使用无容器控制流程时，如何数据绑定DIV的“类”或“ ID”属性？

Question

我正在尝试出色的新型容器控制流（新功能编号2） 淘汰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 =“ $ {名称}”> < /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

以防万一，如果有人想知道如何使用ID属性使用“ CSS”属性，我都在使用“ 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'}"