javascript - knockout 将行添加到创建列的 foreach 循环中

Question

我曾经有一个看起来像这样的 View :

<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 的代码移动到一个 knockout 模板中，并使用 foreach 循环添加它们:

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

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

Answer 1

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

看起来这应该像将 div 行 添加到 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 代码。