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

Posted 2023-03-27

【中文标题】淘汰赛将行添加到创建列的 foreach 循环中

【英文标题】：Knockout adding rows into a foreach loop that creates columns

【发布时间】：2019-03-09 21:01:31

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

看起来这应该就像将div row 添加到 Knockout 模板的顶部一样简单，如下所示：

<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 代码。

【参考方案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>