Question

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

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

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

<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，我必须更改视图和视图模型。 / p>

我已将此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

试试这个：fiddle

您不需要原始绑定。

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

Knockoutjs如果与不匹配的标签绑定

2 个答案: