コンテナレス制御フローを使用しながら、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 = "$ {name}"> < /li>

これはテンプレートを使用している間は些細なことでしたが、今は機能させることはできません。
私は<liを試しました data-bind = 'class：name'> < /li>しかし無駄です。

私はここで新しいです、私に簡単に行ってください。

Answer 1

使用できます css バインディング. 。 2つの方法で使用できます。ダイナミッククラス（またはクラスのリスト）があります。

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

または、個々のクラスがTruthy/falsy値に縛られて、要素から追加/削除する必要があるかどうかを示します。

<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 "fistの属性。

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