如何使用在 Ember js 控制器中承诺的过滤结果答案

【问题标题】：How to use filter result which is a promise in an Ember js controller如何使用在 Ember js 控制器中承诺的过滤结果
【发布时间】：2013-10-28 06:25:56
【问题描述】：

我有一份订单清单。

订单1
订单2

订单3

每个订单都有一些商品

订单1
- 项目11
- 项目12
订单2
- item21
- item22
订单3
- item31
- item32

我这样定义模型（不使用 hasMany 关系）：

App.Order = DS.Model.extend({
  orderNote: DS.attr('string')});

App.Item = DS.Model.extend({
  ItemName: DS.attr('string'),
  orderId:  DS.attr('string')});

目的：当我导航路由“index.html#/orders”时，我想显示所有订单及其项目，如下所示

<ul>
  <li>
    <p>order1_note</p>
    <ul>
      <li>Item11</li>
      <li>Item12</li>
    </ul>
  </li>

  <li>
    <p>order2_note</p>
    <ul>
      <li>Item21</li>
      <li>Item22</li>
    </ul>
  </li>

  <li>
    <p>order3_note</p>
    <ul>
      <li>Item31</li>
      <li>Item32</li>
    </ul>
  </li>
</ul>

我曾尝试使用嵌套的 each 助手，

我用

var currentOrderId = order.get('id');

var ret = this.store.filter('item',{pid,currentOrderId},function(item){return item.get('orderId')=currentOrderId}）

但是如何在我的模板中使用过滤结果（promise）作为 orderItems？

<ul> 
  {{#each order in orders ItemController="order"}}
    <li>
    {{orderNote}}
        <ul>
        {{#each orderItems}}
            <li>item</li>
        {{/each}}
        </ul>
    </li> 
   {{/each}} 
 </ul>

编辑

得到它的工作，感谢这篇文章对查找和过滤器进行了很好的解释，这也是控制器中 self 的一个鼓舞人心的用法，（（ Adding item to filtered result from ember-data )) 但是，这是正确的“Ember 方式”吗？？

<script type="text/x-handlebars" data-template-name="orders">
    <ul>
      {{#each order in controller itemController= 'order'}}
        <li>{{name}}</li>
        <hr /> 
      <ul>
        {{#each item in items.content}}
            <li>
              {{item.name}}
            </li>
        {{/each}}
      </ul>
      {{/each}}
    </ul>
  </script>

这里是 itemController

App.ProjectController =Ember.ObjectController.extend({
  oid:function(){
    return this.get('content').get('id');
  }.property(),

  items: function(){
    var self = this;
    var oid = self.get('id');
    var itemPromise=  self.store.filter('item', {orderId: oid},function (item) {
      return item.get('orderId')==oid;
    });
    //itemPromise is  a promise.
    // cached in the callback as value?
    itemPromise.then(function(value){
      self.set('items',value);
    });
  }.property()

});

【问题讨论】：

标签： ember.js

【解决方案1】：

不，这不是真正的 Ember 方式。相反，您应该使用 belongsTo 和 hasMany 直接在模型之间建立关系。

App.Order = DS.Model.extend({
  orderNote: DS.attr('string'),
  items:     DS.attr('hasMany')
});

App.Item = DS.Model.extend({
  ItemName: DS.attr('string'),
  order:    DS.attr('belongsTo')
});

然后您的模板只使用items 集合。

<script type="text/x-handlebars" data-template-name="orders">
<ul> 
  {{#each order in orders ItemController="order"}}
    <li>
    {{orderNote}}
        <ul>
        {{#each items}}
            <li>{{ItemName}}</li>
        {{/each}}
        </ul>
    </li> 
  {{/each}} 
</ul>
</script>

有关详细信息，请参阅指南中有关“查找模型”的“定义关系”部分。

http://emberjs.com/guides/models/defining-models/#toc_defining-relationships

【讨论】：