Promises Reducer

controllers.application.js

import Ember from 'ember';
import RSVP from 'rsvp';
import { later } from 'ember-runloop';
import get from 'ember-metal/get';
import set from 'ember-metal/set';
import computed, { or } from 'ember-computed';

function createPromise(value, delay = 3000) {
  const deferred = RSVP.defer();
  later(_ => deferred.resolve(value), delay)
  return deferred.promise;
}

const PromiseProxy = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin);

function promiseReduce() {
  const argv = Array.prototype.slice.call(arguments);
  const resolver = argv.pop();

  return computed(...argv, function() {
    const promises = argv.map(prop => get(this, prop));
    const promise = RSVP.all(promises).then(resolver)
    return PromiseProxy.create({ promise });
  });
}

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  a: createPromise(1),
  b: createPromise(2),
  c: promiseReduce('a', 'b', ([a, b]) => a + b),
  
  d: createPromise(3),
  e: 4,
  f: promiseReduce('b', 'd', 'e', ([b, d, e]) => b + d + e),
  
  disableUpdate: or('c.isPending', 'f.isPending'),
  
  updateDependency() {
    set(this, 'b', createPromise(Math.round(Math.random() * 10)))
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{#if c.isPending}}
	<p>Count down with me：“1，2，3”</p>
{{else}}
	<p>{{c.content}}</p>
{{/if}}

{{#if f.isPending}}
	<p>Count down with me：“1，2，3”</p>
{{else}}
	<p>{{f.content}}</p>
{{/if}}

<button
	type="button"
  disabled={{disableUpdate}}
	{{action updateDependency}}>改变依赖项</button>

twiddle.json

{
  "version": "0.10.7",
  "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.10.0",
    "ember-data": "2.10.0",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
  },
  "addons": {}
}