Ember Concurrency Test

components.press-and-hold-button.js

import Ember from 'ember'

function sendPress() {
  this.sendAction('press');
}

function sendRelease() {
  this.sendAction('release');
}

export default Ember.Component.extend({
  tagName: 'button',

  touchStart: sendPress,
  mouseDown:  sendPress,
  touchEnd:   sendRelease,
  mouseLeave: sendRelease,
  mouseUp:    sendRelease,
});

controllers.application.js

import { task, timeout, all, race } from 'ember-concurrency';
const methods = { all, race };

export default Ember.Controller.extend({
  status: "Waiting...",
  childTasks: null,

  parent: task(function * (methodName) {
    let allOrRace = methods[methodName];
    let childTasks = [];

    for (let id = 0; id < 5; ++id) {
      childTasks.push(this.get('child').perform(id));
    }

    this.set('childTasks', childTasks);
    this.set('status', "Waiting for child tasks to complete...");
    let words = yield allOrRace(childTasks);
    this.set('status', `Done: ${Ember.makeArray(words).join(', ')}`);
  }).restartable(),

  child: task({
    percent: 0,
    id: null,

    perform: function * (id) {
      this.set('id', id);
      while (this.percent < 100) {
        yield timeout(Math.random() * 100 + 100);
        let newPercent = Math.min(100, Math.floor(this.percent + Math.random() * 20));
        this.set('percent', newPercent);
      }
      return `Task_${id}`;
    },
  }).maxConcurrency(3),

  actions: {
    cancel(task) {
      task.cancel();
    }
  }
});

templates.application.hbs

<p>
  <button onclick={{perform parent 'all'}}>all()</button>
  <button onclick={{perform parent 'race'}}>race()</button>
</p>

{{#each childTasks as |ti|}}
  <div class="progress-outer">
    <div class="progress-inner">
      Progress: {{ti.percent}}%
      State: {{ti.state}}
      {{#if ti.value}}
        Word: {{ti.value}}
      {{/if}}
       <button {{action 'cancel' ti}}>Cancel</button>
    </div>
   
  </div>
{{/each}}

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js",
    "babel-polyfill":"https://cdn.rawgit.com/nicksrandall/babel-polyfill/master/browser-polyfill.js"
  },
  "addons": {
    "ember-concurrency": "0.6.0"
  }
}