根据之前和当前的行数据，在 foreach 绑定的敲除中注入 table 行

Question

我有一个平面数据数组，如下所示，我正在使用敲除 foreach 绑定

将其写入 table

Customer1 Item1 etc
Customer1 Item2
Customer1 Item3
Customer2 Item1
Customer2 Item2
Customer3 Item1
Customer3 Item2
Customer3 Item3

客户名称重复，所以我想对数据进行分组，在客户更改为生产时注入一个额外的元素：

Customer1
Item1
Item2
Item3
Customer2
Item1
Item2
Customer3
Item1
Item2
Item3

如果我在循环中编写 html，我可以检查当前客户与下一个客户的价值，并在客户发生变化时插入额外的行，但我不知道该怎么做正如挖空模板呈现的那样。我考虑过使用 if 绑定并访问 $index + 1 的属性，但不知道该怎么做。

我知道我可以将数据重新映射到嵌套数组，但在这种情况下我不想这样做。

编辑我试过的 table 代码看起来像

<tbody data-bind="foreach: salesOrders">
    <tr style="display:none;">
        <td colspan="5"><span id="nextCust" data-bind="text: CustDel" style="display:none;"></span></td>
     </tr>
     <!-- ko if: ($("#nextCust").text() != $("#currCust").text()) -->
     <tr>
        <td colspan="5"><a data-bind="attr: {href: CustUrl }"><span data-bind="text:CustDel"></span></a></td>
     </tr>
     <!-- /ko -->
     <tr>
        <td data-bind="text: Name"></td>
        <td><a data-bind="attr: { href: ItemUrl }"><span data-bind="    text: ItemID"></span></a></td>
        <td><span data-bind="alertSvg: Alert"></span></td>
        <td class="n" data-bind="text: Tot"></td>
        <td class="n" data-bind="numText: QxP"></td>
   </tr>
   <tr style="display:none;">
       <td colspan="5"><span id="currCust" data-bind="text:CustDel" style="display:none;"></span></td>
   </tr>

这有点胡说八道，因为我试图捕捉当前和以前客户的价值，就好像绑定在页面上逐渐改变一样，当然，当下一条记录是，它们都会一次性改变绑定。

我需要以某种方式访问 $data[$index-1].CustDel()（即当前记录的前一个记录）并将其与 custDel 的当前值进行比较，但该语句不起作用。

Answer 1

最简单的解决方案是创建额外的 computed，它将以如下方式（使用您的示例数据）重新组合原始纯数据：

var data = [
    { "name": "Customer1", "item": "Item1" },
    { "name": "Customer1", "item": "Item2" },
    { "name": "Customer1", "item": "Item3" },
    { "name": "Customer2", "item": "Item1" },
    { "name": "Customer2", "item": "Item2" },
    { "name": "Customer3", "item": "Item1" },
    { "name": "Customer3", "item": "Item2" },
    { "name": "Customer3", "item": "Item3" }
];


function ViewModel(data){
    this.salesOrders = ko.observableArray(data);
    this.salesOrders.groupedByName = ko.computed(function(){
        var names = {}, groups = [];
        ko.utils.arrayForEach(this.salesOrders(), function(row){
            var group = names[row.name];
            if (!group) {
                group = { name: row.name, items: [] };
                groups.push(group);
                names[row.name] = group;
            }
            group.items.push(row.item);
        });
        return groups;
    }, this);
}

根据示例数据，此计算将return:

[
   {
      "name": "Customer1",
      "items": [
         "Item1",
         "Item2",
         "Item3"
      ]
   },
   {
      "name": "Customer2",
      "items": [
         "Item1",
         "Item2"
      ]
   },
   {
      "name": "Customer3",
      "items": [
         "Item1",
         "Item2",
         "Item3"
      ]
   }
]

Fiddle: http://jsfiddle.net/vagvscpv/1/

Answer 2

记录在案，nemesv 在评论中提供了答案。参见 http://jsfiddle.net/f1mv1mn8/

<div data-bind="foreach: salesOrders">
    <!-- ko if: $index() == 0 || $parent.salesOrders()[$index() - 1].name != $parent.salesOrders()[$index()].name -->
    <strong data-bind="text: name"></strong>
    <!-- /ko -->

        <li data-bind="text: item"></li>
</div>

根据之前和当前的行数据，在 foreach 绑定的敲除中注入 table 行

Inject table row in knockout foreach binding depending on previous & current row data

knockout.js