KnockoutJSを使用して異なるデータ行を返す

Question

私は、タグとタスクの間の関係を含むモデルを持っています。多くのTaskIDは多くのTagIDに関連しています

しかし、私は一意のTagIDとTagNameをテーブルに表示したいと思います。したがって、JSFiddleの例の重複行ではなく、別個の行、つまり表の行が2行だけ戻されます。

2番目のテーブルは、私がただ1つの列を返すのでうまくいきます。以下は

は私のコードです...ここ

var viewModel = function(data) { 
 
    var self = this; 
 
    
 
    self.tagTaskMappings = ko.observableArray([ 
 
    \t {TagID: 2, TagName: "A", TaskID: 1, TaskName: "ManualItems"}, 
 
    {TagID: 2, TagName: "A", TaskID: 2, TaskName: "Trades"}, 
 
    {TagID: 3, TagName: "B", TaskID: 1, TaskName: "ManualItems"}, 
 
    {TagID: 3, TagName: "B", TaskID: 2, TaskName: "Trades"}, 
 
    {TagID: 3, TagName: "B", TaskID: 3, TaskName: "Cash"}, 
 
    {TagID: 3, TagName: "B", TaskID: 4, TaskName: "ReportA"} 
 
    ]); 
 
    
 
    self.filteredtagMappings = ko.computed(function() { 
 
     var types = ko.utils.arrayMap(self.tagTaskMappings(), function (item) { 
 
      return { TagID: item.TagID, TagName: item.TagName, IsTagActive: item.IsTagActive}; 
 
     });   
 
     return ko.utils.arrayGetDistinctValues(types).sort(); 
 
    }, this); 
 
    
 
    self.filteredtagMappings2 = ko.computed(function() { 
 
     var types = ko.utils.arrayMap(self.tagTaskMappings(), function (item) { 
 
      return item.TagName; 
 
     });   
 
     return ko.utils.arrayGetDistinctValues(types).sort(); 
 
    }, this); 
 

 
}; 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
 
<table class="table table-hover"> 
 
      <thead> 
 
       <tr> 
 
        <th>Tag ID</th> 
 
        <th>Tag name</th> 
 
        <th>Task ID</th> 
 
        <th>Task name</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <!-- ko foreach: filteredtagMappings --> 
 
       <tr> 
 
        <td class="ui-state-default" data-bind="text: TagID"></td> 
 
        <td class="ui-state-default" data-bind="text: TagName"></td> 
 
        <td></td> 
 
       </tr> 
 
       <!-- /ko --> 
 
      </tbody> 
 
     </table> 
 

 
<hr /> 
 
    
 
    <table class="table table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <th>Tag ID</th> 
 
       <th>Tag name</th> 
 
       <th>Task ID</th> 
 
       <th>Task name</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody>     
 
      <!-- ko foreach: filteredtagMappings2 --> 
 
      <tr> 
 
       <td></td> 
 
       <td class="ui-state-default" data-bind="text: $data"></td> 
 
       <td></td> 
 
      </tr> 
 
      <!-- /ko -->     
 
     </tbody> 
 
    </table>

http://jsfiddle.net/4qc570eo/2/

Answer 1

はunderscorejsを用いて溶液とノックアウトマッピングplugginです。

http://jsfiddle.net/4qc570eo/6/

self.filteredtagMappings2 = function() { 
    var returnObject = ko.observableArray(''); 
    var uniques = _.map(_.groupBy(ko.toJS(self.tagTaskMappings), function(item) { 
     return item.TagID; 
    }), function(grouped) { 
     return grouped[0]; 
    }); 
    ko.mapping.fromJS(uniques, {}, returnObject); 
    return returnObject; 
    }; 
};