New Twiddle

controllers.application.js

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

function asyncComputed(...deps) {
  let taskFn = deps.pop();
  let fn = task(taskFn).restartable().toFunction();
  return Ember.computed(...deps, function() {
    let args = deps.map(dep => this.get(dep));
    return fn(...args);
  });
}

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  value: "type stuff here",

  foo: asyncComputed('value', function * (value) {
    yield timeout(800);
    return value.toUpperCase();
  }),
});

templates.application.hbs

<h1>Async Computed Properties</h1>

<h3>Brought to you by ember-concurrency</h3>

<h4>Look at application.js to see how it works</h4>

<p>
  {{input value=value}}
</p>

<p>
  Value:
  {{#if foo.isRunning}}
    Loading...
  {{else}}
    {{foo.value}}
  {{/if}}
</p>

<p>
  Last resolved value: {{foo.task.lastSuccessful.value}}
</p>

twiddle.json

{
  "version": "0.10.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {
    "ember-concurrency": "to-fn2"
  }
}