Question

我有一个包含Tag和Task之间关系的模型。如此多的TaskID可以与许多TagID相关联

但是，我想在表格中显示唯一的TagID和TagNames。因此，不是JSFiddle示例中的重复行，而是返回不同的行，即表中只有2行。

第二张表我工作正常，因为我只返回一列。

以下是我的代码......

＆＃13;

var viewModel = function(data) {
    var self = this;
   
    self.tagTaskMappings = ko.observableArray([
   	{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());

＆＃13;

<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>

＆＃13;

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

Answer 1

这是一个使用underscorejs和淘汰映射插件的解决方案。

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;
  };
};

使用KnockoutJS返回不同的数据行

1 个答案: