Làm thế nào để làm nhóm bởi bộ lọc trong Aurelia

Question

Tôi đang tìm cách để làm một cái gì đó giống như

JS

$scope.players = [ 
    {name: 'Gene', team: 'alpha'}, 
    {name: 'George', team: 'beta'}, 
    {name: 'Steve', team: 'gamma'}, 
    {name: 'Paula', team: 'beta'}, 
    {name: 'Scruath', team: 'gamma'} 
]; 

HTML:

<ul repeat.for="obj of players | groupBy: 'team'"> 
    Group name: ${obj.group} 
    <li repeat.for="player of obj.values"> 
    player: ${player.name} 
    </li> 
</ul> 

Có thể làm ? Hoặc cách tốt hơn để làm logic này theo cách Aurelia là gì?

Answer 1

Bạn có thể thực hiện việc này bằng cách sử dụng ValueConverter.

export class GroupByValueConverter { 
    toView(array, groupBy) { 

     var groups = {}; 

     array.forEach(function (o) { 
      var group = o[groupBy]; 
      groups[group] = groups[group] || []; 
      groups[group].push(o); 
     }); 

     return Object.keys(groups).map(function (group) { 
      return { 
       group: group, 
       values: groups[group] 
      }; 
     }) 
    } 
} 

Answer 2

Sau khi tìm câu trả lời này, tôi đã làm theo một cách hơi khác. Thay vì sử dụng một mảng đối tượng có các phím group và value, tôi đã sử dụng Map.

Cập nhật xem

<ul repeat.for="[group, values] of players | groupBy:'team'"> 
    Group name: ${group} 
    <li repeat.for="player of values"> 
    player: ${player.name} 
    </li> 
</ul> 

Đối với bộ chuyển đổi giá trị tôi đã sử dụng this answer cho cảm hứng trên một cách hiệu quả để thực hiện một nhóm bằng cách phẫu thuật.

Giá trị Chuyển đổi

export class GroupByValueConverter { 
    toView(objects, key) { 
    return objects.reduce(
     (rv, x) => rv.set(x[key], (rv.get(x[key]) || []).concat(x)), 
     new Map() 
    ); 
    } 
} 

Answer 3

Một phần mở rộng cho ValueConverter trên cho phép sử dụng một bộ lọc nhóm với thuộc tính đối tượng lồng nhau (ví dụ groupby:. 'Team.id')

export class GroupByValueConverter { 
    toView(array, groupBy) { 

     var groups = {}; 
     var props = groupBy.split("."); 

     array.forEach(function (o) { 
      var group = o; 
      props.forEach(function (p) { group = group[p] }); 
      groups[group] = groups[group] || []; 
      groups[group].push(o); 
     }); 

     return Object.keys(groups).map(function (group) { 
      return { 
       group: group, 
       values: groups[group], 
      }; 
     }) 
    } 
} 

Tuy nhiên, một tiện ích mở rộng khác cho phép chỉ định làm nhóm đối tượng. Mất một tham số thứ hai để chỉ định khóa đối tượng sẽ được sử dụng làm chỉ mục.

ví dụ: - | groupBy: 'team': 'id' - | groupBy: 'projectMember.team': 'id'

export class GroupByValueConverter { 
    toView(array, groupBy, groupByKey) { 

     var groups = {}; 
     var groupMembers = {}; 
     var props = groupBy.split("."); 

     array.forEach(function (o) { 
      var group = o; 
      props.forEach(function (p) { group = group[p] }); 
      var index = groupByKey && group ? group[groupByKey] : group; 
      groups[index] = group; 
      groupMembers[index] = groupMembers[index] || []; 
      groupMembers[index].push(o); 
     }); 

     return Object.keys(groups).map(function (index) { 
      return { 
       group: groups[index], 
       values: groupMembers[index], 
      }; 
     }) 
    } 
}