I have a item model and each item can have many items. This can be many levels deep.

I have this jsfiddle /

how do I change this to be able to have multiple levels of items and also how do I loop down each level to display them ?

I also need be able to order each items children and store that order to persist to server.

please can anyone show me how you can do this ?

UPDATE:

I have now managed to implement the Items can be many levels deep bit of this problem see here /

But i need a way to state the order of each items children and to display them in that order. At the moment it just displays the children items from the itemIds array but this is only used for association purposes and i cant change this to re-order can i ??

Anyone know how to do this ?

Thanks a lot rick

I have a item model and each item can have many items. This can be many levels deep.

I have this jsfiddle http://jsfiddle/rmossuk/xmcBf/3/

how do I change this to be able to have multiple levels of items and also how do I loop down each level to display them ?

I also need be able to order each items children and store that order to persist to server.

please can anyone show me how you can do this ?

UPDATE:

I have now managed to implement the Items can be many levels deep bit of this problem see here http://jsfiddle/rmossuk/fBmmS/3/

But i need a way to state the order of each items children and to display them in that order. At the moment it just displays the children items from the itemIds array but this is only used for association purposes and i cant change this to re-order can i ??

Anyone know how to do this ?

Thanks a lot rick

• javascript
• ember.js
• ember-data

• If you have resolved this, do you mind posting the solution. – brg Commented Aug 3, 2012 at 10:52
• i have not resolved it yet! still trying ! Hope someone can help me soon. – Rick Moss Commented Aug 3, 2012 at 11:11
• I have seen that Ember.ArrayController has a sortProperties but cant seem to work out how to add an ArrayController for each item to store each items children order. Hope someone can help soon – Rick Moss Commented Aug 3, 2012 at 11:20
• Here I am! Hope I will help... :-) – Mike Aski Commented Aug 3, 2012 at 11:51

1 Answer 1

In the views, use a sortedItems puted property, defined as follow:.

JS

App.Item = DS.Model.extend({
  name: DS.attr('string'),
  index: DS.attr('number'),
  items: DS.hasMany('App.Item', {key: 'itemIds'} ),
  item: DS.belongsTo('App.Item'),
  product: DS.belongsTo('App.Product'),

  sortedItems: function () {
    var items = this.get('items').toArray();
    return items.sort(function (lhs, rhs) {
      return lhs.get('index') - rhs.get('index');
    });
  }.property('[email protected]')
});

See a full working solution here: http://jsfiddle/MikeAski/K286Q/3/

EDIT

According to your request, here is another solution, keeping the sorted ids inside the parent (to minimize updates & indexes management): http://jsfiddle/MikeAski/K286Q/12/

JS

App.Item = DS.Model.extend({
  name: DS.attr('string'),
  items: DS.hasMany('App.Item', {key: 'itemIds'} ),
  sortedIds: DS.attr('string', { key: 'sortedIds' }),
  item: DS.belongsTo('App.Item'),
  product: DS.belongsTo('App.Product'),

  sortedChildren: function () {
    if (!this.get('isLoaded')) {
      return [];
    }
    var sortedIds = this.get('sortedIds').split(','),
        items = this.get('items').toArray();
    return sortedIds.map(function (id) {
      if (id === '') {
        return null;
      }
      return items.find(function (item) {
          return item.get('id') == id;
      });
    }).filter(function(item) {
      return !!item;
    });
  }.property('isLoaded', 'sortedIds', '[email protected]')
});

A little bit more plicated, nevertheless...