2

foreachバインディングでは、<ul>ノックアウトで動的cssクラスをそれぞれに追加する必要があります<li>。

私がバインドしているオブジェクトは次のようになります。

{
    id: 1234,
    class: "foo",
}

class次のように、ノックアウトで各アイテムのプロパティを対応するアイテムに追加したいと思います<li>。

<ul data-bind="foreach: TheList">
    <li data-bind="css: class" />
</ul>

そのため、私の[効果的な]出力は次のようになります。

<ul>
    <li class="foo" />
    <li class="bar" />
    <li class="etc" />
</ul>

バインディング構文がわかりません。私はこれを試しました、

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

エラーが発生します：

バインディングを解析できません。メッセージ：SyntaxError：構文エラー; バインディング値：css：クラス

私はこれを試しました、

<li data-bind="css: $data.class" />

エラーが発生します：

バインディングを解析できません。メッセージ：SyntaxError：予期された識別子。バインディング値：css：$ data.class

jsclassキーワードの競合を避けるために、引用符で囲みました。

<li data-bind="css: 'class'" />

これはエラーをスローしませんが、予期しない結果をもたらします。「トリム」はclassコレクション内のアイテムのプロパティ値の1つではないことを100％確信しています。

<li class="trim" data-bind="css: 'class'" __ko__1354588574237="ko3">

$indexAFAIKは変数（またはなど）を計算機に渡すことができないため、この場合、計算機を使用する方法や使用できるかどうかはわかりません$data。したがって、計算機はどのアイテムを返すかを知ることができませんclass。

このシナリオに適したバインディング構文は何ですか？それは可能ですか？

解決策/回避策

css:プロパティの名前が「class」の場合、これはIE8のバインディングの問題のようです。遭遇した場合の3つの異なる回避策は次のとおりです。

フィールドの名前を「class」以外の名前に変更します（ソースを制御できる場合）。

または、リスト内のオブジェクトを変更して、別の名前から値にアクセスできるようにすることもできます。

for (var i = 0; i < TheList.length; i++)
{
    TheList[i].safeName = TheList[i]['class'];
}

または、attr:バインディングの代わりにバインディングを使用することもできますcss:。これは、同じ問題が発生していないようで、引用符で囲まれている限り、「class」と呼ばれるメンバーを使用できます。

<li data-bind="attr: { 'class': 'class' } />
4

1 に答える 1

1

これは機能するはずです：

<ul data-bind="foreach: TheList">
    <li data-bind="css: $data['class'], text: $data['class']" />
</ul>​

でキーワードの問題が発生していると思いますclass。 作業中のjsfiddle。

于 2012-12-04T03:12:17.950 に答える