New Twiddle

controllers.application.js

import Ember from 'ember';
var names = ['a', 'c', 'd', 'b', 'q', 'e'];

function getRandomIntInclusive(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  users: Ember.computed(function() {
    return DS.PromiseArray({content: Em.A()});
  }),
  filteredUsers: Ember.computed.filterBy('users','name',3),
  sortedUsers: Ember.computed('[email protected]', function() {
    return this.get('filteredUsers').sortBy('name');
  }),
  actions: {
    yo: function () {
      var number = getRandomIntInclusive(0, 5);
      var user = Ember.Object.create({ name: names[number] });
      var users = this.get('users')
      this.set('users', [user].concat(users))
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<button {{action 'yo' on="click"}}>Add User</button>
{{#each sortedUsers as |user|}}
	{{user.name}}
{{/each}}

twiddle.json

{
  "version": "0.4.7",
  "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.6/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.7/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.6/ember-template-compiler.js"
  }
}