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 へのバインディングに何か問題があります。

いじる: http://jsfiddle.net/6ph42/2/

これを行うべき別の方法はありますか？そうでない場合、ここでビューにどのバインディングを渡す必要がありますか?

ありがとう！

4

2 に答える 2

1

私は、カテゴリ用の ArrayController (おそらく独自のモデルである必要があります) と、この新しい CategoriesController ( ArrayControllers に組み込まれているEmber.SortableMixinから) の sortProperties を使用して、より洗練されたソリューションに取り組み始めました。

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

また、リスト ビューでアウトレットを使用して、リスト テンプレート自体からリスト カテゴリを分離する方法も示しました。ここでやるべきことはまだありますが、一般的には、懸念を分離し、ビューとモデルを可能な限り最小のコンポーネントに分解できればできるほど、Ember はより意味のあるものになり始めることがわかります。

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

最後まで説明できなくて申し訳ありません。あなたの実際のアプリケーションを確認するか、より明確な例を示す必要があると思います (言うは易く行うは難しであることは理解していますが、私はあなたの主張には触れませんが、本当に助けたいと思っています) ）。これは、20 分以内に頭を包み込むには少し多すぎました。

于 2012-11-26T19:41:27.423 に答える
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 に答える