4

多次元連想配列があります。

this.items = ko.observableArray([
    { name: "name1", viewable: true, children: [
        { name: "name1-1", viewable: true, children: []},
        { name: "name1-2", viewable: false, children: []}
    ] },
    { name: "name2", viewable: false, children: [] },
    { name: "name3", viewable: true, children: [
        { name: "name3-1", viewable: true, children: []},
    ] },
        { name: "name4", viewable: true, children: [] }
]);

目標は、この配列をループして、'viewable' が true に設定されている値のみを出力することです。

一連の if ステートメントと foreach ステートメントを使用してこれを機能させていますが、コードが手に負えなくなり始めています。この例では 2 レベルしかカバーしていませんが、私の配列は最大5 レベルの深さまで取得できるため、このコードは倍増し、すぐに見苦しくなります。

<ul data-bind="foreach: items">
    <!-- ko if: viewable -->
    <li data-bind="text: name"></li>
        <!-- ko foreach: children -->
            <!-- ko if: viewable -->
            <li data-bind="text: name"></li>
            <!-- /ko -->
        <!-- /ko -->
    <!-- /ko -->
</ul>

では、配列全体をループするより簡単でより良い方法はありますか?

JS フィドル リンク

4

3 に答える 3

3

Underscore.jsには、配列を操作するいくつかの優れたメソッドがあります。おそらく、flattenとfilterを使用して、構造から 1 つの配列を作成し、それを 1 つ記述するだけですforeach。

if: viewableまたは、テンプレートを使用してロジックをカプセル化し、テンプレートを再帰的に適用することもできます。

<script type="text/html" id="template">
  <!-- ko if: viewable -->
    <li data-bind="text: name"></li>    
        <!-- ko template: { name: 'template', foreach: $data.children } -->
        <!-- /ko -->    
  <!-- /ko -->
</script>

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

JSFiddle のデモ。

于 2013-04-04T15:26:02.820 に答える
1

必要なのはテンプレートです:

<script type="text/html" id="ItemTemplate">
    <!-- ko if: viewable -->
        <li data-bind="text: name"></li>
        <!-- ko template: { name: 'ItemTemplate', foreach: children } --><!-- /ko -->
    <!-- /ko -->
</script>

そして、ちょうど：

<ul data-bind="template: { name: 'ItemTemplate', foreach: items }"></ul>
于 2013-04-04T15:26:38.287 に答える
1

アイテムに空の子配列を追加すると、テンプレートを使用できます

JSFiddle サンプル

<ul data-bind="foreach: items">
    <idv data-bind="template: {name: 'mytemp'}" />
</ul>
<div data-bind="stopBinding:true">
    <div id="mytemp">
        <div data-bind="visible :viewable">
            <li data-bind="text: name"></li>
            <div data-bind="foreach: children">
                <div data-bind="template: {name: 'mytemp'}" /></div>
        </div>
    </div>
</div>
于 2013-04-04T15:30:00.577 に答える