javascript - ForEach 列表 knockout 以显示在不同的 div 中，可能吗？

Question

我有绑定(bind)到 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>

意味着，从第 3、7、10 等元素开始，我希望它打开一个新的父 div。

提前致谢!

Answer 1

使用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>