New Twiddle

application.controller.js

import Ember from 'ember';
import hookableSort from 'demo-app/hookable-sort';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  foo: [ 'b', 'a', 'd', 'c' ],
  sortedFoo: hookableSort('foo', function() {
    // I don't know how to use method
    console.log('things be happening');
  })
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<ul>
  {{#each sortedFoo as |f|}}
    <li>{{f}}</li>
  {{/each}}
</ul>
<br>
{{outlet}}
<br>
<br>

hookable-sort.js

import Ember from 'ember';

const {
  computed
} = Ember;

export default function hookableSort(arrString, method) {
  console.log(this);
  console.log(arrString);
  console.log(method);
   const fn = () => {
       const arr = this.get(arrString);
       this.triggerStart();
       arr.sortBy(args);
       this.triggerDone();
       return arr;
   };
   return computed(arrString + '.[]', fn);
}

twiddle.json

{
  "version": "0.4.17",
  "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.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}