ComposableDemo

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  model: [
    {name: 'billy', age: 20},
    {name: 'george', age: 30},
    {name: 'william', age: 50}
  ]
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#each model as |item|}}
	{{item.name}}
{{/each}}

{{#filter-things list=model as |list|}}
	{{#each list as |item|}}{{item.name}}{{/each}}
{{/filter-things}}
<br>
<br>

filter-things.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  list: null,
  filterKey: 'name',
  startsWith: 'g',
  filteredList: Ember.computed('list.[]', 'filterKey', 'startsWith', {
    get() {
      const key = this.get('filterKey');
      const startsWith = this.get('startsWith');
      return this.get('list')
        .filter(
        	item => item[key].startsWith(startsWith)
        );
    }
  })
});

filter-things.template.hbs

{{yield filteredList}}

testing.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [
      {name: 'george', age: 20},
      {name: 'dave', age: 100},
      {name: 'dudewhateven', age: 45}
    ];
  }
});

testing.template.hbs

<h1>Testing</h1>

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}