Question

我试图绕过这个，但我似乎无法找到一个干净的解决方案。我有这个型号：

// models/person.js
export default DS.Model.extend({
  birthDate: DS.attr('date'), // e.g. ISO date => 1.2.1990
  name: DS.attr('string'), // e.g. John Doe
  birthYear: Ember.computed('birthDate', function() {
    return this.get('birthDate').getFullYear(); // => 1990
  })
});

我想让persons.hbs像这样显示：

<h4>1990</h4>
<ul>
 <li>John Doe</li>
 <li>Jane Doe</li>
</ul>
<h4>1989</h4>
<ul>
  <li>Jack Doe</li>
</ul>
<h4>1988</h4>
<ul>
 <li>Jim Smith</li>
 <li>Jack Smith</li>
</ul>

所以基本上我希望所有人的名单在每个出生年份之间分开。我很感谢任何想法！

Answer 1

请查看this

groupedResults: function () {
  var result = [];

  this.get('content').forEach(function(item) {
    var hasType = result.findBy('type', item.get('type'));

    if(!hasType) {
     result.pushObject(Ember.Object.create({
        type: item.get('type'),
        contents: []
     }));
    }

    result.findBy('type', item.get('type')).get('contents').pushObject(item);
   });

   return result;
}.property('content.[]')

并在模板上

{#each groupedResults}
  <h1>{{type}}</h1>
  {{#each contents}}
     <!-- assuming it has a name -->
     {{name}}
  {{/each}}
{{/each}}

Answer 2

我刚刚发现有一个npm包正是这样做的。

https://www.npmjs.com/package/ember-group-by

每个Ember，显示列表，为属性添加组标题

2 个答案: