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方法创建两个集合：

<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

您可以只使用 mod 2，如下所示：

<div data-bind="foreach: list">
    <!--ko if: $index() % 2 == 0 -->
    <div class="row">
        <div class="col-md-6">
            <span data-bind="text: $data"></span>
        </div>
        <div data-bind="with: $parent.list()[$index()+1]" class="col-md-6">
            <span data-bind="text: $data"></span>
        </div>
    </div>
    <!--/ko-->
</div>

小提琴：http: //jsfiddle.net/robgallen/1728389j/

Answer 3

使用可观察数组的安全且干净的示例

<!-- 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 4

只需制作一个包含一行和两个单元格的外部表在第一个单元格内放置另一个只有偶数索引的表。在第二个单元格中绑定到奇数索引。

        <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>