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('items.@each.isLoaded')
});

LO.Item = DS.Model.extend({
  name: DS.attr('string'),
  categoryName: DS.attr('string')
});

在我的模板中，我试图遍历每个categoryName，渲染它，然后渲染该类别中的所有项目。

<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('items.@each.isLoaded')

我相应地更新了你的jsfiddle：

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

Answer 2

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

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

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

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

很抱歉，我无法完成，我想我们要么需要看到你真实的应用程序，要么是一个更清晰的例子（虽然我明白这说起来容易做起来难，所以我没有说明你的情况，我真的这么做想帮忙）。在不到20分钟的时间里，我的头脑太多了。

显示已编入索引/已排序的DS.hasMany

2 个答案: