Simple Tree

The simplest form of the tree component is to build a tree of nodes ahead and assign the root node to the \{{em-tree}} tag.

  1. The model must have a children property that is an array of the children models.
  2. The selected property will be bound to the selected node in the tree.

Demo

{{em-tree model=model selected=selected}} {{#if selected}} Selected node is: {{selected.title}} {{else}} Select a node by clicking on it {{/if}}

Markup

\{{em-tree model=model selected=selected}}
<button \{{action 'expand'}}>toggle expand</button>

Code

import Em from "ember";
import TreeNode from 'ember-idx-tree/node'

export default Em.ObjectController.extend({
  init: function() {
    var family, gaya, josh, lud, moses, suz, verdi;
    family = TreeNode.create({
      title: 'Family'
    });
    suz = family.createChild({
      title: 'Susan'
    });
    lud = family.createChild({
      title: 'Luda'
    });
    josh = suz.createChild({
      title: 'Josh'
    });
    moses = suz.createChild({
      title: 'Moses'
    });
    verdi = lud.createChild({
      title: 'Verdi'
    });
    gaya = lud.createChild({
      title: 'Gaya'
    });
    return this.set('model', family);
  },
  actions: {
    expand: function() {
      this.get('selected').toggleProperty('expanded');
      return null;
    }
  }
});