Question

我曾经有过一个看起来像这样的视图：

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
    <h4 class="text-center">Row 1, Col 1</h4>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
    <h4 class="text-center">Row 1, Col 2</h4>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
    <h4 class="text-center">Row 1, Col 3</h4>
</div>
<div class="row">
//Repeat...

使用Bootstrap设置基本4行，每行3列。现在，我将columns的代码移到了一个模板中，并使用foreach循环添加了它们：

<div data-bind="foreach: myArray">
    <my-widget params="value: $data"></my-widget>
</div>

这很好用，但是缺少row这件事。如何每3 div row添加一个columns？

Answer 1

您是说my-widget组件仅包含3列，并且您希望div row包含这3列吗？

这看起来应该像在{{n}}模板的顶部添加div row一样简单，

<div class='row'>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <h4 class="text-center">Row 1, Col 1</h4>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <h4 class="text-center">Row 1, Col 2</h4>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <h4 class="text-center">Row 1, Col 3</h4>
    </div>
</div>

如果这不可行，您也可以这样做：

<div data-bind="foreach: myArray">
    <div class="row">
        <my-widget params="value: $data"></my-widget>
    </div>
</div>

如果这些都不正确，那么我建议您向我们展示模板以及相关的viewModel代码。

Answer 2

从foreach内部的绑定上下文访问$ index https://knockoutjs.com/documentation/binding-context.html

<div data-bind="foreach: myArray">
    <!-- ko if: $index() !== 0 && $index() % 3 === 0 -->
    <div class="row">
    <!-- /ko -->
    <my-widget params="value: $data"></my-widget>
</div>

淘汰赛将行添加到创建列的foreach循环中

2 个答案: