2

カスタム テンプレートknockout.jsを使用してマップされた配列が与えられた場合、配列内の各項目を別のテンプレートを使用してレンダリングするにはどうすればよいでしょうか?

これは、希望する機能のjsFiddle の例へのリンクです。

簡単に言えば、次のような配列が与えられます。

people: ko.observableArray([
    { name: 'Rod', age: 123, template: 'personItem' },
    { name: 'IBM', incorporated: 1911, template: 'corporateItem' },
])

foreach:一部のアイテムには 1 つのテンプレートを使用し、他のアイテムには異なるテンプレートを使用するバインディングを設定するにはどうすればよいでしょうか。

(注: アンダースコア テンプレートを使用すると問題が混同されることは承知しており、不必要な混乱を招いてしまったことをお詫びします。)

if次のように、テンプレートの種類ごとに 1 つのバインディングのセットで 1 つのテンプレートを使用することを考えました。

<div data-bind='foreach: people'>
   <div data-bind='if: people.template() == "personItem"'>
   </div>
   <div data-bind='if: people.template() == "corporateItem"'>
   </div>
</div>

これは非常に洗練されていないように思えます。私は、よりエレガントでかなり単純なオプションがあると思います (希望します)。

どんな考えでも大歓迎です。読んでくれてありがとう。

4

1 に答える 1

15

nameバインディングのパラメータに文字列を渡すのではなく、template実際に関数を渡してテンプレートを決定できます。foreachアイテムを通じて「それぞれ」を行うのではなく、ケースでオプションを使用してこれを組み合わせる必要があります。

したがって、ビューモデルは次のようになります。

var viewModel = {
    people: ko.observableArray([
        { name: 'Rod', age: 123, template: 'personItem' },
        { name: 'IBM', incorporated: 1911, template: 'corporateItem' },
    ]),
    getTemplate: function(item) {
        return item.template;   
    }
};

マークアップは次のようになります。

<ul data-bind="template: { name: getTemplate, foreach: people }"></ul>

<script type="text/html" id="personItem">
        <li>
            <b data-bind="text: name"></b> is <%= age %> years old
        </li>
</script>

<script type="text/html" id="corporateItem">
        <li>
            <b data-bind="text: name"></b> is <%= incorporated %> years old
        </li>
</script>

以下に例を示します: http://jsfiddle.net/rniemeyer/xF2xe/

追加の参考資料を次に示します。

于 2012-08-16T02:35:25.567 に答える