How to use filter result which is a promise in an Ember js controller

0
votes

I have a list of orders.

  • order1
  • order2

  • order3

    Each orders has some items

    • Order1
      • item11
      • item12
    • Order2
      • item21
      • item22
    • Order3
      • item31
      • item32

    I define the models like this(without using hasMany relationships):

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

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

PURPOSE: When I nav to route "index.html#/orders", I want to show all the orders together with its Items followed as below

<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>

I had tried to use a nested each helper,

I use

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

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

but how can I use the filter result(promise) as orderItems in my temlate?

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

EDIT

Got it works, thanks to this post with great explanation about find and filter,also an inspirating usage of self in controller,(( Adding item to filtered result from ember-data )) But still, is this the right "Ember way"??

<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>

And here is the 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()

});
1
ember.js

1 Answers

0
votes

No, this is not really The Ember Way. Instead you should use belongsTo and hasMany to set up relationships directly between your models.

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')
});

And then your template just uses the items collection.

<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>

See the "Defining Relationships" seciton of the guide about "Finding Models" for more info.

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