Array Computed Properties

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  items: [
    { name: 'Fuu' },
    { name: 'Bar' },
    { name: 'Baz' },
    { name: 'Qix' }
  ],
  
  computedBasic: Ember.computed('items', function() {
    return this.get('items').mapBy('name');
	}),
  
  computedArray: Ember.computed('items.[]', function() {
    return this.get('items').mapBy('name');
	}),
  
  computedEach: Ember.computed('items.@each', function() {
    return this.get('items').mapBy('name');
	}),
  
  computedEachChained: Ember.computed('[email protected]', function() {
    return this.get('items').mapBy('name');
	}),
  
  actions: {
    add(item) {
      this.get('items').addObject({ name: item })
    },
    remove(item) {
      this.get('items').removeObject(item)
    },
    swap() {
      this.set('items', [{ name: 'fuu' }, { name: 'bar' }])
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}

Add: {{input action='add'}}

<p>Swap array for a new array: <button {{action "swap"}}>Swap</button></p>

<h4>Edit</h4>
<ul>
{{#each items as |item|}}
  <li>{{input value=item.name}} <button {{action "remove" item}}>X</button></li>
{{/each}}
</ul>

<h4><code>'items'</code></h4>
<ul>
{{#each computedBasic as |name|}}
  <li>{{name}}</li>
{{/each}}
</ul>

<h4><code>'items.[]'</code></h4>
<ul>
{{#each computedArray as |name|}}
  <li>{{name}}</li>
{{/each}}
</ul>

<h4><code>'items.@each'</code></h4>
<ul>
{{#each computedEach as |name|}}
  <li>{{name}}</li>
{{/each}}
</ul>

<h4><code>'[email protected]'</code></h4>
<ul>
{{#each computedEachChained as |name|}}
  <li>{{name}}</li>
{{/each}}
</ul>

twiddle.json

{
  "version": "0.4.8",
  "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.8/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.9/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember-template-compiler.js"
  }
}