如何在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/