New Twiddle

controllers.application.js

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

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  value: "type stuff here",
  
  delayed: asyncComputed('value', function * (value) {
    yield timeout(800);
    return value;
  }),

  upper: asyncComputed('delayed', function * (asyncValue) {
    let value = yield asyncValue;
    yield timeout(800);
    return value.toUpperCase();
  }),
  
  reverse: asyncComputed('upper', function * reverse(asyncValue) {
    return (yield asyncValue).split('').reverse().join('');
  }),

  joined: asyncComputed('delayed', 'upper', function * (delayed, upper) {
    yield emit("Please Wait...");
    return [yield delayed, yield upper].join('--');
  }),
});

templates.application.hbs

<h3>ember-concurrency async computed properties</h3>

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

<ul>
  <li>delayed: {{delayed.value}}</li>
  <li>upper: {{upper.value}}</li>
  <li>reverse: {{reverse.value}}</li>
  <li>reverseCached: {{reverse.lastSuccessful.value}}</li>
  <li>joined: {{joined.value}}</li>
</ul>

<p>
  This twiddle demonstrates some experimental API
  for a variety of different ways to control when
  async values appear on the screen, especially when
  their distant dependencies have been invalidated.
</p>

<p>
  It also shows what happens when you have an
  asyncComputed depend on another asyncComputed;
  rather than waiting for the async dependency to
  resolve before invoking the getter fn, it invokes
  the getter right away with potentially unresolved
  async values (they are "TaskInstance"s in e-c
  terminology but they have a promise-y API),
  allowing for some nice patterns with `emit()`
  so that, while the dependencies are still resolving
  you can emit a "loading" value using `emit()`, which
  lets you emit a value before the function has returned.
</p>

<p>
  Is that weird? Too much boilerplate (since it makes you
  call `yield` -- and maybe some day `await` -- to get
  the resolved value)? I dunno. I feel it'll also be useful
  in the case that errors occur, so that down stream
  dependencies can decide for themselves how to act when
  some upstream dependency errored.
</p>

twiddle.json

{
  "version": "0.10.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": 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": "tof3"
  }
}