0

KOテンプレートを使用してJSONファイル（ここを参照）をいくつかの見栄えの良いグリッドレイアウトに解析しようとしています..（石積み/同位体レイアウトに似ていると思います）.各テンプレートセクションには、内部に異なるサイズの長方形と正方形がありますが、全体テンプレートは、幅5ボックス、高さ3ボックスのグリッドに準拠しています（例）

これを前提として、私がやろうとしているのは、テンプレートを検出し、反復の特定のインデックスがシングル、ダブル、またはトリプルのサブテンプレートをロードする場合、各アイテムを反復することです。

私の問題は、ViewTestProposal配列のどのキーが現在オンになっているのかを確認できないように見えることです。

以下は私のWIPコードです。

<div data-bind="template: {if: Template == 'basic2', visible: Template == 'basic2', foreach: ViewTestProposal}">
    <div data-bind="template: {if: ViewTestProposal[0], name: 'single'}"></div>
</div>
<script type="text/html" id="single">
    <div class="box single">
        <p data-bind="text: Artist, attr:{title: Artist}"></p>
    </div>
</script>

if: ViewTestProposal[0]セクションをwith: ViewTestProposal[0]に変更してみif: ViewTestProposal() === 0ましたif: ViewTestProposal == 0が、役に立ちませんでした。

あなたが提供できるどんな助けにも前もって感謝します

4

1 に答える 1

4

テンプレート名パラメーターは、配列内の現在の項目に基づいて名前を返す関数にすることができます（注4を参照）。これにより、テンプレート名を持つ各アイテムのプロパティにアクセスできます。

<div data-bind="template: {
        foreach: ViewTestProposal, 
        name: function(item) {return item.boxsize;}
    }"></div>

配列内のアイテムのインデックスを使用する必要がある場合、これはKnockoutバージョン2.1以降で$index contextプロパティを介して使用できます。バージョン2.2（[2012年10月1日]はまだリリースされていませんが、リリース候補バージョンが利用可能です）以降、name関数はコンテキストオブジェクトにもアクセスできます。次に、次のようなことを行うことができます。

<div data-bind="template: {
        foreach: ViewTestProposal, 
        name: function(item, context) {
            switch(context.$index()) {
            case 0:
                return 'single';
            case 1:
                return 'double';
            // etc.
            }
        }
    }"></div>

明らかに、関数自体はビューモデルで定義できます。

于 2012-10-02T09:48:25.863 に答える