Question

我有这样的代码：

        <!-- ko foreach: Items -->
            <!-- ko if: $index() % 3 == 0 -->
                <div class="row">
                <h1 data-bind="text: $index()"></h1>
            <!-- /ko -->
                <div class="col-md-4 item">
                    <h1 data-bind="text: $index()"></h1>
                </div>
            <!-- ko if: $index() % 3 == 2 -->
                </div>
            <!-- /ko -->
        <!-- /ko-->

我只想在每个行中创建包含三个项目的行。但$index值仅在第一个if中可见。我不明白为什么。有人可以帮忙吗？

Answer 1

Knockout不会强制性地运行您的模板，而是从您的标记声明性地构建DOM。因此，单独使用ko if虚拟绑定开始/结束标记将无法正常工作。

同样，你不能在html中执行此操作：

<strong> Some <em> text that </strong> has jagged start/end tags. </em>

将strong和/strong替换为您的ko if和/ko if，您就会感觉到为什么效果不佳。< / p>

你需要完全找到另一种方法来做你想做的事。这是一个：

＆＃13;

function Vm() {
  var self = this;
  
  self.Items = ko.observableArray([1,2,3,4,5,6,7]);
  
  self.GroupedItems = ko.computed(function() {
    var a = self.Items(), arrays = [], size = 3;
    while (a.length > 0) arrays.push(a.splice(0, size));
    return arrays;
  });
}

ko.applyBindings(new Vm());

＆＃13;

.row { display: block; }
.col-md-4 { display: inline-block; padding: 5px; background: silver; }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<!-- ko foreach: GroupedItems -->
<div class="row">
  <h1 data-bind="text: $index()"></h1>
  <!-- ko foreach: $data -->
  <div class="col-md-4 item">
    <h1 data-bind="text: $index() + ' - ' + $data"></h1>
  </div>
  <!-- /ko -->
</div>
<!-- /ko-->

＆＃13;

这也允许你不返回子数组，而是包含子数组的对象，例如一个小组＆＃34; name＆＃34;包括索引。

有趣的是，我之前想过类似的问题，基于feedback I got on CodeReview.SE我决定只使用一个行并将所有项目转储到那里，这可能是有用的对于你的场景（虽然你似乎需要行之间的h1）。

淘汰赛的foreach在if之后看不到$ index

1 个答案: