javascript - div - 자바스크립트 title 변경




Aurelia에서 필터로 그룹을 수행하는 방법 (2)

나는 뭔가를 할 길을 찾고있다.

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>

할 수 있습니까? 또는 Aurelia 방식으로이 논리를 수행하는 더 좋은 방법은 무엇입니까?


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

중첩 된 객체 속성 (예 : groupBy : 'team.id')이있는 그룹 필터를 사용할 수있는 위의 ValueConverter 확장

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],
            };
        })
    }
}

객체를 그룹으로 지정할 수있는 또 다른 확장입니다. 인덱서로 사용할 객체 키를 지정하는 데 두 번째 매개 변수가 필요합니다.

예. - | groupBy : '팀': '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],
            };
        })
    }
}




aurelia