如何在Knockoutjs中合并具有相同内容的表格单元格？

Question

我想用Knockoutjs创建表。如果单元格的价值是相同的，我想合并表单元格。我无法弄清楚如何做到这一点。

我有以下代码

<table id="EventTracker"> <tbody data-bind="template: { name: 'person-template', foreach: Person}"></tbody></table> 
<script type="text/html" id="person-template"> 
    <tr><td data-bind="text: Name"></td><!-- ko template: { name: 'event-template', foreach: event }--> <!-- /ko --> </tr> 
</script> 

<script type="text/html" id="event-template"> 
    <td data-bind="text: Label"></td> 
</script> 

创建表的罚款。不过，如果内容在每个单元中相同，我不希望显示单个单元格。如果正在用于创建td的事件与前一个相同，我想将单元格的单元格增加1.有效地不创建单个单元格，而是合并它们。例如。如果我有3个具有相同文本的单元格，它们应该合并并创建一个带有3的colspan的单个td。我不知道如何在Knockoutjs中对其进行编码。

任何想法？

Answer 1

而不是复杂的模板，我会寻找在您的视图模型中建立一个事件数据的映射版本，这将使绑定更容易。

一个对您个人的对象计算观察到的可能是：

this.eventCells = ko.computed(function() { 
    var current, 
     result = []; 

    ko.utils.arrayForEach(this.events(), function(event) { 
     if (current && current.label() !== event.label()) { 
      current = null; 
     } 

     if (!current) { 
      current = { label: event.label, count: 0 }; 
      result.push(current); 
     } 

     current.count++;  
    }); 

    return result; 
}, this); 

现在，你可以通过eventCells的foreach，然后绑定，如：

data-bind="text: label, attr: { colspan: count }" 

这里有一个例子：http://jsfiddle.net/rniemeyer/3g8jw/