twitter-bootstrap - Knockoutjs 如果绑定不匹配的标签

Question

我有一个可观察的数组，可以说{ people: ko.observableArray() }我已经绑定到一系列 div

<!-- ko foreach: people -->
<div><span data-bind="text: name"></span></div>
<!-- /ko -->

现在我想使用一个网格框架（特别是 twitter 引导网格，因为它已经在项目中普遍存在）并每两个项目开始一个新行。我尝试过类似以下的方法。

<div class="row-fluid">
    <!-- ko foreach: people -->
        <div class="span6"><span data-bind="text: name"></span></div>
        <!-- ko if: $index() % 2 === 1 -->
        </div><div class="row-fluid">
        <!-- /ko -->
    <!-- /ko -->
</div>

不幸的是，knockout 不喜欢 if 语句中不匹配的标签并引发绑定错误。我可以在我的视图模型中完成这项工作并将其拆分为一组数组，但这感觉不对，如果我要更改为每行 3 个，我必须同时更改视图和视图模型。

我已经将此jsFiddle设置为起点。

有没有办法让这样的东西单独在视图中工作？当然，如果有一种方法可以让引导网格在没有标签体操的情况下进行包装，这也可以解决问题。

Answer 1

您可以使用原始绑定来欺骗 KO。它有点黑客，但有效

http://jsfiddle.net/s3CVp/3/

<!-- ko if: $index() % 2 === 1 -->
    <!-- ko html: '</div><div class="row-fluid gb">' --><!-- /ko -->
<!-- /ko -->

Answer 2

试试这个：小提琴

您不需要原始绑定。

<div class="container-fluid rb">
        <!-- ko foreach: people -->
        <!-- ko if: $index() % 2 === 0 -->
            <div class="row-fluid gb">
        <!-- /ko -->
        <!-- ko if: $index() % 2 === 1 -->
            </div>
        <!-- /ko -->
        <div class="span6 bb">
            <span data-bind="text: name"></span>
        </div>

        <!-- /ko -->
</div>