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