Expandable list v2

README_01.md

Version 2 of the example of a simple expandable list. In this example the problem is solved in a isolated way. The controller doesn't need to know that the list is or isn't expanded, all is handle by the component.

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:'Ember Twiddle',
  families: [
    {
      title:'parent a', 
      children: [ 
        { title:'a son' },{ title:'a daughter' }
      ]
    },
    {
      title:'parent b', 
      children: [ 
        { title:'b son' }
      ]
    },
    { title:'single c' }
  ]
});

application.template.hbs

<h1>Open</h1>
{{#expand-list items=families as |isExpanded family|}}
  <li>{{family.title}}</li>
  {{#if isExpanded}}
    <ul>
      {{#each family.children as |child|}}
        <li>{{child.title}}</li>
      {{else}}
        <li>No children</li>
      {{/each}}
    </ul>
  {{/if}}
{{/expand-list}}

expand-item.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  isExpanded: false,
  didInitAttrs() {
    this.set('isExpanded', this.getAttr('all-expanded').bool);
    this.notifyParent();
  },
  didUpdateAttrs(attrs) {
  	if('all-expanded' in attrs.newAttrs) {
    	this.set('isExpanded', this.getAttr('all-expanded').bool);
      this.notifyParent();
    }
  },
  notifyParent() {
    let isExpanded = this.get('isExpanded');
    this.getAttr('notify')(isExpanded);
  },
  willDestroyElement() {
    this.set('isExpanded', false);
  	this.notifyParent();
  },
  actions: {
    toggleExpand() {
      this.toggleProperty('isExpanded');
      this.notifyParent();
    }
  }
});

expand-item.template.hbs

<div {{action 'toggleExpand'}}>
	{{yield isExpanded}}
</div>

expand-list.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  allExpanded: false,
  showCollapseAll: false,
  totalExpanded: 0,
  actions: {
  	expandAll() {
    	this.set('allExpanded', {bool: true});
    },
    collapseAll() {
    	this.set('allExpanded', {bool: false});
    }
  },
  trackChild: function(isExpanded) {
    if(isExpanded) {
      this.incrementProperty('totalExpanded');
    } else {
      this.decrementProperty('totalExpanded');
    }

    let total = this.get('totalExpanded');
    this.set('showCollapseAll', total >= 0);
  }
});

expand-list.template.hbs

{{#if showCollapseAll}}
  <button {{action 'collapseAll'}}>Collapse All</button>
{{else}}
  <button {{action 'expandAll'}}>Expand All</button>
{{/if}}

{{#each attrs.items as |item index|}}
  {{#expand-item 
  	notify=(action trackChild)
    all-expanded=allExpanded as |isExpanded|}}
		{{yield isExpanded item index}}
	{{/expand-item}}
{{/each}}

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"
  }
}