显示索引/排序的 DS.hasMany

Question

我正在尝试找出显示对象数组的正确方法，这些数组由对象唯一的"categoryName"属性索引，但我目前尝试这样做的方式并没有按照我预期的方式运行。

LO.List = DS.Model.extend({
  name: DS.attr('string'),
  items: DS.hasMany('LO.Item'),
  categoryNames: function() {
     // return an array of all unique item.categoryNames
  }.property('[e-mail]')
});
LO.Item = DS.Model.extend({
  name: DS.attr('string'),
  categoryName: DS.attr('string')
});

在我的模板中，我尝试遍历每个类别名称，呈现它，然后呈现该类别中的所有项目。

<ul>
    {{#each content.categoryNames}}
        <li>
          Category: {{this}}
          Items: {{view LO.ItemsInCategoryView categoryNameBinding="" itemsBinding=""}}
        </li>
    {{/each}}
</ul>

我对 ItemsInCategoryView 的绑定做错了，因为我无法获取当前上下文 categoryName 或该视图中的整个 Items 数组。

摆弄：http://jsfiddle.net/6ph42/2/

我应该有不同的方法吗？如果没有，我应该将哪些绑定传递给此处的视图？

谢谢！

Answer 1

可能有一种更优雅的方法，但我认为您必须创建一个新的数据结构才能完成您想要的。

不过，您可以即时创建它：

categories: function() {
  var categories = [],
      items = this.get('items');
  items.forEach(function(item) {
    var categoryName = item.get('categoryName');
    var category = categories.filterProperty('name', categoryName);
    if(category.length === 0) {
        category = Ember.Object.create({name: categoryName, items: []})
        categories.addObject(category);
    }else{
         category = category.get('firstObject');   
    }
    category.get('items').addObject(item);
  });
  return categories;
}.property('[e-mail]')

我相应地更新了您的 jsfiddle：

http://jsfiddle.net/6ph42/3/

Answer 2

我开始研究一个更优雅的解决方案，使用ArrayController的类别（可能应该是它自己的模型）和这个新的CategoriesController上的sortProperties（来自Ember.SortableMixin，内置于ArrayControllers中）。

LO.CategoriesController = Em.ArrayController.extend({
  sortProperties: ['categoryName'],
  sortAscending: true,
});

我还演示了如何使用列表视图中的插座将列表类别与列表模板本身分开。这里还有更多的工作要做，但总的来说，你会发现，你越能分离关注点并将视图和模型分解为尽可能小的组件，Ember 就会开始变得更有意义。

http://jsfiddle.net/hNmBF/1/

抱歉，我

无法完成，我认为我们要么需要查看您的真实应用程序，要么需要一个更干净的例子（尽管我知道说起来容易做起来难，所以我不会讨论您的情况，我真的很想提供帮助）。这有点太多了，无法在不到 20 分钟的时间内完成我的头脑。