0

我试图找出显示对象数组的正确方法，这些对象数组由对象的唯一“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/

我应该这样做有不同的方式吗？如果没有，我应该将哪些绑定传递给这里的视图？

谢谢！

4

2 回答 2

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/

于 2012-11-26T00:07:50.870 回答
1

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

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

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

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

抱歉，我无法完成，我认为我们要么需要查看您的真实应用程序，要么需要一个更简洁的示例（尽管我知道说起来容易做起来难，所以我不会处理你的情况，我真的很想帮忙）。在不到 20 分钟的时间里，这有点太多了。

于 2012-11-26T19:41:27.423 回答