Ember Data Model in relation with itself

Ember Data
1

Hi, I use ember cli with ember 2.0. I have a model called node declared as follows:

import DS from 'ember-data';

export default DS.Model.extend({
	name: DS.attr('string'),
	alias: DS.attr('string'),
	childs_count: DS.attr('number'),

	parent: DS.attr('number'),
 	childs: DS.hasMany('node')
});

My nodes list from back-end is like this:

{ "nodes": [
			{ 
				"id": 1, 
				"name": "Dashboard", 
				"alias": "dashboard", 
				"childs_count": 3,
				"childs": [5, 6, 7],
				"parent": 0
			}, 
			{ 
			        "id": 2, 
				"name": "Forms", 
				"alias": "forms", 
				"childs_count": 0,
				"childs": [],
				"parent": 0
			}, 
			{ 
				"id": 3, 
				"name": "Tables", 
				"alias": "tables", 
				"childs_count": 0,
				"childs": [],
				"parent": 0
			}, 
			{ 
				"id": 4, 
				"name": "Statistics", 
				"alias": "statistics",
				"childs_count": 1,
				"childs": [8],
				"parent": 0
			},
			{ 
				"id": 5, 
				"name": "Data Tables", 
				"alias": "data_tables",
				"childs_count": 0,
				"childs": [],
				"parent": 1
			}, 
			{ 
			        "id": 6, 
				"name": "Plain Tables",
				"alias": "plain_tables" ,
				"childs_count": 0,
				"childs": [],
				"parent": 1
			}, 
			{  
				"id": 7, 
				"name": "Media Tables",
				"alias": "media_tables"
				"childs_count": 0,
				"childs": [],
				"parent": 1
			},
			{  
				"id": 8, 
				"name": "Last Option",
				"alias": "last_option",
				"childs_count": 0,
				"childs": [],
				"parent": 4
			}, 
			{
				"id": 9, 
				"name": "Level 3 Option",
				"alias": "level_3_option"
				"childs_count": 0,
				"childs": [],
				"parent": 5
			}
		]				
	}

I’ve tried to do something recursive in template using components. Here is the menu-nodes component template:

<ul class="nodes" >
	{{#each nodes as |node|}}
		<li class="node-menu-option project-node-{{node.alias}}">
			{{node-menu-option node=node}}		
		</li>
	{{/each}}
</ul>

and here is the node-menu-option template:

    {{#link-to 'node' node.alias class="node-menu-option-link"}}
    	{{node.name}}
    	{{#if node.warnings_count}}
    		<span class="label label-warning">{{node.warnings_count}}</span>
    	{{/if}}
    	{{#if node.infos_count}}
    		<span class="label label-info">{{node.infos_count}}</span>
    	{{/if}}
    {{/link-to}}	

    {{! show childs nodes }}
    {{node.childs_count}}
    {{#if node.childs_count}}
    	{{nodes-menu nodes=node.childs}}
    {{/if}}

and in application template I have this:

<aside class="sidebar-menu">
	{{nodes-menu nodes=model.nodes}}
</aside>

My result on page is something like this:

Dashboard 10 3
Forms 0
Tables 3 0
Statistics 1
Data Tables 0
Plain Tables 0
Media Tables 0
Last Option 0
Level 3 Option 0

Normally, “Data Tables”, “Plain Tables” and “Media Tables” should be after “Dashboard”. I hope I didn’t put to much info. I tried to simplify my model and results.

I believe it is worth mentioning that I’ve try to use parent: belognsTo(‘node’) ; I’ve tried adding inverse, but the results were not correct. For instance with inverse, I’ve got:

    Dashboard 10 3
          Data Tables 0
          Plain Tables 0
          Media Tables 0  
    Forms 0
    Tables 3 0
    Statistics 1
    Data Tables 0
    Plain Tables 0
    Media Tables 0
    Last Option 0
    Level 3 Option 0

Thanks.