knockout.js - コレクションを 2 列で表示する

Question

現在私は持っています：

<div data-bind="foreach: list">
</div>

そして必要：

<div data-bind="foreach: /* 1st half of the list */">
</div>
<div data-bind="foreach: /* 2nd half of the list */">
</div>

2 つの別々のオブザーバブルまたは計算されたものを使用しないようにすることをお勧めします。

Answer 1

配列sliceメソッドを使用して、2 つのコレクションを作成できます。

<div data-bind="foreach: list.slice(0, list.length / 2) ">
    <span data-bind="text: $data" />
</div>
<div data-bind="foreach: list.slice(list.length / 2)">
    <span data-bind="text: $data" />
</div>

監視可能な配列がある場合は、バインディングを少し変更する必要があります。

<div data-bind="foreach: list.slice(0,list().length / 2) ">
    <span data-bind="text: $data"/>
</div>
<div data-bind="foreach: list.slice(list().length / 2)">
    <span data-bind="text: $data"/>
</div>

JSFiddleのデモ。

Answer 2

監視可能な配列を使用する安全でクリーンな例

<!-- ko with: myObservableArray -->
    <div data-bind="foreach: $data.slice(0, $data.length / 2)">
        <span data-bind="text: $data"/>
    </div>
    <div data-bind="foreach: $data.slice($data.length / 2)">
        <span data-bind="text: $data"/>
    </div>
<!-- /ko -->

Answer 3

1 つの行と 2 つのセルを含む外側のテーブルを作成するだけで、最初のセル内に偶数インデックスのみを含む別のテーブルを配置できます。2 番目のセルでは、奇数インデックスにバインドします。

        <table style="table-layout:fixed;">
            <tr>
                <td>
                    <table style="table-layout:fixed;">
                        <tbody data-bind="foreach: someObservableArray">
                            <!--ko if: $index() % 2 == 0 -->
                            <tr>
                                <td data-bind="text: somePropertyInArrayObject"></td>                                 
                            </tr>
                            <!--/ko-->
                        </tbody>
                    </table>
                </td>
                <td>
                    <table style="table-layout:fixed;">
                        <tbody data-bind="foreach: someObservableArray">
                            <!--ko ifnot: $index() % 2 == 0 -->
                            <tr>
                                <td data-bind="text: somePropertyInArrayObject"></td>                                    
                            </tr>
                            <!--/ko-->
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>