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>

这有点无稽之谈，因为我正试图捕捉当前＆amp;的价值。以前的客户好像绑定在页面上逐渐变化，当然它们都会在下一条记录被绑定时一次性改变。

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

Answer 1

最简单的解决方案是创建额外的计算，它将以这样的方式重新组合原始普通数据（使用您的示例数据）：

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"
      ]
   }
]

小提琴：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>

根据之前的＆amp; amp;注入淘汰foreach绑定中的表格行。当前行数据

2 个答案: