根据以前和当前行数据在挖空中为每个绑定注入表行

Question

我有一个扁平的数据数组，如下所示，我正在使用敲除foreach绑定将其写入表

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的属性，但不知道如何做到这一点。

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

编辑我尝试过的表格代码看起来像

<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

对于记录，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>

Answer 2

最简单的解决方案是创建额外的计算，以这样的方式（使用样本数据）重新组合原始的纯数据：

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);
}

根据样本数据，该计算将返回：

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

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