1

ノックアウトバインディングを使用して読み込まれた画像で 3x3 グリッドを作成したい

<fieldset class="ui-grid-b" data-bind="foreach: Icons">
 <div>
    <img alt="" src="../res/placeholder.png" style="width: 80px; height: 80px" />
 </div>
</fieldset>

Images プロパティはビュー モデルから取得され、ajax 呼び出しによって非同期に読み込まれます。

次のように、各画像の div を設定する必要があります。

第 1 div の場合：<div class="ui-block-a" /> 第 2 div の場合：<div class="ui-block-b" /> 第 3 div の場合：<div class="ui-block-c" /> 第 4 div の場合：<div class="ui-block-a" /> 第 5 div の場合：<div class="ui-block-b" /> 第 6 div の場合：<div class="ui-block-c" /> ...

クラス名は「ui-block-」+ div_index % 3

問題は、クラス名の設定方法がわからないことです。計算されたオブザーバブルを使用しようとしましたが、Icons.IndexOf(icon) % 3 を返すことができるようにするために、実際のオブジェクト (アイコン モデル) を取得できません

4

1 に答える 1

3

内部で Knockout 2.1 を使用すると、変数foreachにアクセスできます。$index

<div data-bind="attr: {'class': $root.indexLetter($index())}">

次のように ViewModel にメソッドを作成します。

viewModel.indexLetter = function(index) {
    var abc = 'abc';
    return 'ui-block-' + abc.charAt(index % 3);
}
于 2012-07-08T22:33:24.670 に答える