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个单独的observable或计算它会很棒。

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

使用可观察数组的安全且简洁的示例

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

您可以使用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 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>

在2列中渲染集合

4 个答案:

使用可观察数组的安全且简洁的示例