0

2つのタイプのいずれかになり得るアイテムのリストがあります-タイプに応じて、異なるスタイリング/レイアウトを使用する必要があります。私が今行っているのは、すべてのアイテムを繰り返し処理し、それぞれに両方の「テンプレート」を表示することですが、type（）の評価方法に応じて、アイテムごとに1つのテンプレートのみを表示します。アイテムごとに必要なテンプレートは1つだけなので、これはエレガントではないようです。ページのマークアップの半分は表示されません。

これらのアイテムを2つの異なる配列に分割せずに、これらのアイテムに必要なマークアップのみをロードできる方法はありますか？

4

2 に答える 2

2

うん、このようなものはあなたのために働くはずです。

<div data-bind="foreach: yourArray">

    <div data-bind="if: isTypeOne">
        <div>template for type one</div>
    </div>

    <div data-bind="if: isTypeTwo">
        <div>template for type two</div>
    </div>

</div>

このように、各条件付きタグ内のテンプレートは、trueと評価された場合にのみ生成されます。

于 2013-03-25T21:49:18.807 に答える
2

あなたがすべきことは、2つの「テンプレート」を実際のテンプレートに入れ、使用するテンプレートを決定する計算されたオブザーバブルを追加することです。これは、テンプレートが非常に複雑な場合や、表示する可能性のあるさまざまなテンプレートがある場合に特に役立ちます。

たとえば、ユーザーがいるとします。

function User(user) {
    this.name = ko.observable(user.name);
    this.isSuperUser = ko.observable(user.isSuperUser);

    // this chooses which template to use        
    this.userTemplate = ko.computed(function () {
        return this.isSuperUser()
            ? "userTemplate-superuser"
            : "userTemplate-user";
    }, this);
}

ユーザーのリストがあれば、それが何であるかに基づいて適切なテンプレートを表示できますuserTemplate。

<div data-bind="foreach: users">
    <div data-bind="template: userTemplate"></div>
</div>

<script id="userTemplate-superuser" type="text/html">
    <div class="su">
        Greetings super user <span data-bind="text: name"></span>
    </div>
</script>
<script id="userTemplate-user" type="text/html">
    <div class="u">
        Greetings regular user <span data-bind="text: name"></span>
    </div>
</script>

デモ

于 2013-03-25T23:27:46.270 に答える