Javascript KnockoutJS-打印html片段

我试图在ObservaterRay中的每4个对象上使用类

row fluid

渲染一个新div。不幸的是，将html片段放入if块似乎并没有什么效果

有没有其他方法可以做到这一点

<!-- ko foreach: detailsVm.addresses -->
    <!-- ko if: $index() % 3 === 0 -->
    <div class="row-fluid">
    <!-- /ko -->

    <div class="span4">
        My Content
    </div>

    <!-- ko if: $index() % 3 === 0 -->
    </div>
    <!-- /ko -->
<!-- /ko -->

我的内容

这一款有很多（不太好）的方法：

通常，我建议将数组映射到更适合在视图中绑定的结构。因此，您可以将其映射到行/单元格结构。然后，您可以轻松地在行/单元格之间循环以生成输出。比如：

有点混乱，但你甚至可以：

<div class="container" data-bind="foreach: items">
    <!-- ko if: $index() % 3 === 0 -->
    <div class="row-fluid">
        <div class="span4" data-bind="text: name"></div>
        <!-- ko with: $parent.items()[$index() + 1] -->
        <div class="span4" data-bind="text: name"></div>
        <!-- /ko -->
        <!-- ko with: $parent.items()[$index() + 2] -->
        <div class="span4" data-bind="text: name"></div>
        <!-- /ko -->
    </div>
    <!-- /ko -->
</div>

比如：

自定义绑定的一个想法是创建一个绑定，该绑定接收一个数组和多个列，并将其拆分为更小的数组。类似这样的内容：

ko.bindingHandlers.arrayToRows={
init：函数（元素、valueAccessor、all、vm、上下文）{
var rows=ko.computed（函数（）{
var options=ko.toJS（valueAccessor（）），
data=options.data，
count=options.count，
行=[]，行；
对于（变量i=0，j=data.length；i

我还有一个想法，自定义绑定将在事件发生后包装元素。当我有更多的时间时，我可能会尝试一下。

有很多（不太好的）方法来完成这一步：

通常，我建议将数组映射到更适合在视图中绑定的结构。因此，您可以将其映射到行/单元格结构。然后，您可以轻松地在行/单元格之间循环以生成输出。比如：

有点混乱，但你甚至可以：

<div class="container" data-bind="foreach: items">
    <!-- ko if: $index() % 3 === 0 -->
    <div class="row-fluid">
        <div class="span4" data-bind="text: name"></div>
        <!-- ko with: $parent.items()[$index() + 1] -->
        <div class="span4" data-bind="text: name"></div>
        <!-- /ko -->
        <!-- ko with: $parent.items()[$index() + 2] -->
        <div class="span4" data-bind="text: name"></div>
        <!-- /ko -->
    </div>
    <!-- /ko -->
</div>

比如：

自定义绑定的一个想法是创建一个绑定，该绑定接收一个数组和多个列，并将其拆分为更小的数组。类似这样的内容：

ko.bindingHandlers.arrayToRows={
init：函数（元素、valueAccessor、all、vm、上下文）{
var rows=ko.computed（函数（）{
var options=ko.toJS（valueAccessor（）），
data=options.data，
count=options.count，
行=[]，行；
对于（变量i=0，j=data.length；i

---

我还有一个想法，自定义绑定将在事件发生后包装元素。如果我有更多的时间，我可能会试一试。

我知道你已经修复了它，但考虑到未来：在你的上下文中，包装器div总是存在，但每第四行只存在一个“流体”类，这会有害吗？因为如果不是，即使我讨厌呈现不必要的标记，在这样的迭代情况下，有时我发现只使用CSS更容易。比如：

---

.container.row:nth child（4n）{Your fluid styles}

我知道您已经修复了它，但考虑到未来：在您的上下文中，始终存在包装器div，但每第4行只存在一个“fluid”类，这是否有害？因为如果不是，即使我讨厌呈现不必要的标记，在这样的迭代情况下，有时我发现只使用CSS更容易。比如：

---

.container.row:nth child（4n）{Your fluid styles}

您的目标是在一行中包含3列（因此，在添加下两列之前不要关闭div）？谢谢Ryan-看起来问题在于需要打开$index@rpnRyan-是的，我只尝试在每三个项目上打开和关闭div-但事情仍然很奇怪-有什么陷阱我应该注意吗@rpn

$index

是一个可观察的对象，因此它肯定需要展开。KO需要平衡元素（正确地打开/关闭），因此执行部分代码片段是不可行的。我有几个备选方案，我可以为您快速编写。@rpn-您可以编写的任何提示都将不胜感激：）您的目标是在一行中有3列（因此，在添加下两列之前不要关闭div）？谢谢Ryan-看起来问题是$index需要展开@rpnRyan-是的，我只尝试在每三个项目上打开和关闭div-但事情仍然很奇怪-有什么陷阱我应该注意吗@rpn

$index

是一个可观察的对象，因此它肯定需要展开。KO需要平衡元素（正确地打开/关闭），因此执行部分代码片段是不可行的。我有几个选择，我可以很快为你写出来。@rpn-任何你可以写出来的提示都将不胜感激：）我们使用了固定宽度浮动div，并立即解决了所有问题：）非常感谢你的合作