javascript - ForEach List knockout 可以在不同的div中显示吗？

我有绑定到我的parentDiv的列表

<div class="parentDivLegende" data-bind="template: {name: 'legende', foreach : ListeLegende}"></div>

并且为每个元素生成一个div，其中包含两个mo div，请参见下文：

<script id="legende" type="text/html">
    <div class="PaddingLegende">
        <div class="CircleLegendeColor imgLegende" data-bind="style: { backgroundColor : Couleur}"></div>
        <div data-bind="text: Libelle" class="TextLegende"></div>
    </div>
</script>

但是，对于每个3个元素，我想创建一个新的divParent，我希望它看起来像这样：

<div class="parentDivLegende">
            <div class="PaddingLegende">
                <div class="CircleLegendeColor imgLegende" data-bind="style: { backgroundColor : Couleur}"></div>
                <div data-bind="text: Libelle" class="TextLegende"></div>
            </div>
            <div class="PaddingLegende">
                <div class="CircleLegendeColor imgLegende" data-bind="style: { backgroundColor : Couleur}"></div>
                <div data-bind="text: Libelle" class="TextLegende"></div>
            </div>
            <div class="PaddingLegende">
                <div class="CircleLegendeColor imgLegende" data-bind="style: { backgroundColor : Couleur}"></div>
                <div data-bind="text: Libelle" class="TextLegende"></div>
            </div>
</div>

意思是，从3rd，7th，10th等元素开始，我希望它打开一个新的父div。

提前致谢！

最佳答案

使用computed在代码中执行。

function obj(lib, col) {
  return {
    Libelle: lib,
    Couleur: col
  };
}

data = [
  obj('one', 'blue'),
  obj('two', 'green'),
  obj('three', 'red'),
  obj('four', 'gray'),
  obj('five', 'lightblue'),
  obj('six', 'lightgreen'),
  obj('seven', 'lightgray')
];

vm = (function() {
  var self = {};
  self.originalArray = ko.observable(data);
  self.groupedArray = ko.computed(function() {
    var result = [],
      originalData = self.originalArray();
    for (var index = 0; index < originalData.length; index += 3) {
      result.push(originalData.slice(index, index + 3));
    }
    return result;
  });
  return self;
}());

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: groupedArray">
  <h1>Group begins</h1>
  <div class="parentDivLegende" data-bind="foreach:$data">
    <div class="PaddingLegende">
      <div class="CircleLegendeColor imgLegende" data-bind="style: { backgroundColor : Couleur}">
        Some color
      </div>
      <div data-bind="text: Libelle" class="TextLegende"></div>
    </div>
  </div>
</div>

关于javascript - ForEach List knockout 可以在不同的div中显示吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34138631/