Expandable list

README_01.md

Example of a simple expandable list. There's a problem with it, because it doesn't notify the controller when all the items have been expanded, so the name of the button won't change to react to this new situation.

View Twiddle | Copy Twiddle | View Gist

Original idea of this README taken from @rwjblue

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Expandable list',
  buttonName: 'expand all',
  families: [{title:'parent a', 
            children: [ 
              { title:'a son' },{ title:'a daughter' }
            ]
           },
           {title:'parent b', 
            children: [ 
             { title:'b son' }
            ]
           },
         { title:'single c' }
        ],
  actions:{
    expandAll:function(){
      if(this.get('buttonName') === 'expand all'){
        this.set('buttonName', 'compress all');
        this.set('expandList', true);
      } else {
        this.set('buttonName', 'expand all');
        this.set('expandList', false);
      }
    }
  }
});

application.template.hbs

<h1>{{appName}}</h1>
<p>Click on the parents to see their children</p>
<br>
<button {{action 'expandAll'}}>{{buttonName}}</button>
<br>
<br>
{{#each families as |parent|}}
  {{item-list parent=parent expandAll=expandList}}
{{/each}}
<br>
<br>

item-list.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  expanded: false,
  latestExpandAll:false,
  isExpanded:Ember.computed('expanded','expandAll',function () {
    const expandAll = this.get('expandAll');
    if(expandAll !== this.get('latestExpandAll')){
      this.set('latestExpandAll',expandAll);
      this.set('expanded',expandAll);
      return expandAll;
    }
    return this.get('expanded');
  }),
  click(){
    this.toggleProperty('expanded');
  }
});

item-list.template.hbs

{{parent.title}}<br>
{{#if isExpanded}}
  <ul>
  {{#each parent.children as |child|}}
  <li>{{child.title}}</li>
  {{/each}}
  </ul>
{{/if}}

twiddle.json

{
  "version": "0.4.13",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js"
  }
}