Expandable list v3

README_01.md

Version 3 of the example of a simple expandable list. In this example the problem is solved by extending the model to allow it to content information of the view. This way, whichever is using the model will know the state of the items inside (expanded or not expanded), so the controller will be able to handle it.

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' }
        ],
  familyModels: Ember.computed('families', function(){
  	return this.get('families').map((p)=>{
      return Ember.Object.create({
        isExpanded: false,
        parent:p
      });
    });
  }),
  
  expandedModels: Ember.computed.filterBy('familyModels', 'isExpanded', true),
  
  allExpanded: Ember.computed('expandedModels.length', function(){ return this.get('expandedModels.length') === this.get('familyModels.length'); }),
  
  actions:{
    toggleAllExpanded:function(){
      var expand = !this.get('allExpanded');
      this.get('familyModels').forEach((parent)=> parent.set('isExpanded', expand));
    }
  }
});

application.template.hbs

<h1>{{appName}}</h1>
<p>Click on the parents to see their children</p>
<br>
<button {{action 'toggleAllExpanded'}}>{{if allExpanded 'collapse all' 'expand all'}}</button>
<br>
<br>
{{#each familyModels as |model|}}
  {{item-list model=model expandAll=expandList}}
{{/each}}
<br>
<br>

item-list.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  model: null,
  parent: Ember.computed.alias('model.parent'),
  isExpanded: Ember.computed.alias('model.isExpanded'),
  click: function(){
    this.toggleProperty('isExpanded');
  }
});

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