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を作成するために使用されているイベントが以前のイベントと同じ場合、私はセルのcolspanを1ずつ増やしたいと思います。個々のセルを効果的に作成せずにマージします。例えば。同じテキストのセルが3つある場合、3のcolspanで1つのtdをマージして作成する必要があります。Knockoutjsでそれをどのようにコーディングするのか分かりません。

アイデア？

Answer 1

テンプレートを複雑にするのではなく、バインドを容易にするビューモデルで、イベントデータのマップされたバージョンを作成することにします。

Aは、あなたの人物オブジェクトに観察可能な計算は次のようになります。今

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/