Tree with Ember Data

It is possible to render a tree from ember data models as long as your model has:

Please note that for every visibile node its children will be loaded from the server even if the node is not opened, This is because get('children') is invoked for every node on the tree in order to render its icon appropriately. If you want a more sophisiticated solution with async support with more control of how children are loaded then look at the {{#link-to 'async'}}Async Tree{{/link-to}} approach.

Demo

{{em-tree model=model selected=current}} Selected: {{current}}

Markup

\{{em-tree model=model}}

Code

#in reality replaced with a real adapter 
App.Tag.FIXTURES = [
    {id: 1, title: 'Family', parent: 0, children: [10, 11]}
    {id: 10, title: 'Susan', parent: [1], children: [100, 101]}
    {id: 11, title: 'Luda', parent: [1], children: [102, 103]}
    {id: 100, title: 'Josh', parent: [10], children: []}
    {id: 101, title: 'Moses', parent: [10], children: []}
    {id: 102, title: 'Verdi', parent: [11], children: []}
    {id: 103, title: 'Gaya', parent: [11], children: []}
]

App.Tag = DS.Model.extend
    title: DS.attr 'string'
    children: DS.hasMany('tag', {async: true})
    parent: DS.belongsTo('tag', {async: true})

App.ComponentTreeEmberdataRoute = Em.Route.extend
    model: ->
        @store.find('tag', 1)
{{em-tree-branch node=model}}