web-dev-qa-db-ja.com

コンテナレス制御フローを使用しながら、divの「class」または「id」属性をデータバインドする方法は？

Knockout 2.0.0リリース または http://jsfiddle.net/StevenSanderson/8vms5/light で素晴らしい新しいコンテナレス制御フロー（新機能番号2）を試しています

<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>

<liclass = "$ {name}"> </ li>のようなものが必要な場合

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

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

knockout.js
47
nthapa

cssbinding を使用できます。 2つの方法で使用できます。動的クラス（またはクラスのリスト）のいずれか：

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

または、要素に追加/削除する必要があるかどうかを示すために、真実/偽の値に対してバインドされた個々のクラスを使用します。

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

2012年半ばの時点で、クラス名に直接バインドする "css" バインディングがあります。

例えば。：

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

誰かが「css」属性をid属性とともに使用する方法を知りたい場合、「css」属性とid属性の両方を使用していましたが、私にとっては「css」属性が最初の属性でない場合は機能しませんでしたので、最初のCSS」属性。

<div class="panel-collapse collapse" data-bind="css:{in:$index()==0}, attr: { id:'collapse'+$index()} ">

...
...
...

</div>
1
ATHER