Knockoutを使用して列の値を1回だけ表示する方法はありますか？

Question

私はKnockoutを使ってオブジェクトのリストをループするテーブルを生成しています。しかし、私が一度しか見せたくないコラムがあります。以下の例では：

Group | Component | Description | 
--------------------------------- 
A  | Comp 1 | Desc 1  | 
A  | Comp 2 | Desc 2  | 
B  | Comp 3 | Desc 3  | 
B  | Comp 4 | Desc 4  | 

私は最終的な出力は次のようになりたいです：

Group | Component | Description | 
--------------------------------- 
A  | Comp 1 | Desc 1  | 
     | Comp 2 | Desc 2  | 
B  | Comp 3 | Desc 3  | 
     | Comp 4 | Desc 4  | 

は、jQueryのまたはいくつかの他のフレームワークを経由してこれを行う方法はありますか？

編集

サンプルコード： https://jsfiddle.net/on6Lby1c/

Answer 1

Anoopsは作品に答えるが、私は個人的には、インラインの計算を避けることを好みます。 この計算を関数にオフロードし、$parent経由でビューモデルのものにバインドすることができます。

あなたは0重複:)

var vm = function() { 
 
    var data = new ko.observableArray([ 
 
    { group: 'A', component: 'Component 1', description: 'Description 1' }, 
 
    { group: 'A', component: 'Component 2', description: 'Description 2' }, 
 
    { group: 'B', component: 'Component 3', description: 'Description 3' }, 
 
    { group: 'B', component: 'Component 4', description: 'Description 4' }, 
 
    ]); 
 

 
    function groupValue(index) { 
 
    \t var underlyingArray = data(); 
 
    if(index == 0) 
 
     return underlyingArray[0].group; 
 

 
    return underlyingArray[index-1].group == underlyingArray[index].group \t 
 
    \t ? "" : underlyingArray[index].group; 
 
    } 
 

 
    return { 
 
    data: data, 
 
    groupValue: groupValue 
 
    } 
 
} 
 

 
ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<table> 
 
    <thead> 
 
     <tr><th>Group</th><th>Component</th><th>Description</th></tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: data"> 
 
     <tr> 
 
      <td data-bind="text: $parent.groupValue($index())"></td> 
 
      <td data-bind="text: component"></td> 
 
      <td data-bind="text: description"></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

https://jsfiddle.net/fv9x3s20/

Answer 2

変化として以下のコード、それは動作します。フィドルを更新しました

<table> 
 
    <thead> 
 
     <tr><th>Group</th><th>Component</th><th>Description</th></tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: myObj"> 
 
     <tr> 
 
      <td data-bind="text: $index()-1 >= 0? ($parent.myObj[$index()-1].group == group? '' : group):group"></td> 
 
      <td data-bind="text: component"></td> 
 
      <td data-bind="text: description"></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

、

https://jsfiddle.net/on6Lby1c/1/