Knockout.js 在2列中呈现集合

目前我有：

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

---

最好避免使用两个单独的观察值或计算值。

您可以使用array

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>

演示。

使用可观测阵列的安全、清晰示例

---

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

---

Fiddle:

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

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

“最好避免使用两个单独的观察对象或计算对象。”-为什么要忽略一件专门设计用来做这类事情的东西？我认为反映UI布局不是ViewModel的责任。我说得对吗？理论上是的，但HTML在动态垂直列（即没有预定义项目计数的布局）方面是出了名的糟糕。您可以使用CCS

float:left和单个
，但布局将从左到右。您可以尝试使用CSS
列计数
，但这并没有得到一致的支持。或者你可以务实一点。选择你的毒药。谢谢你@Tomalak，我会记住的。但问题是如何在KO中拆分列表。可以使用if条件，如$index        <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>