ember-pipeline demo

controllers.application.js

import Ember from 'ember';
import { pipeline, step, CANCEL } from 'ember-pipeline';
import timeout from '../utils/timeout';

export default Ember.Controller.extend({
  result: 'Nothing run yet',
  value: 10,
  
  fizzBuzz: Ember.computed(function() {
    return pipeline(this, [
    	step('validateInput'),
      step('handleThreeCase'),
    	step('handleFiveCase'),
    	step('handleAllOtherCases'),
      step('thinking'),
      step('printResult')
  	]).onCancel((cancellation) => this.handleCancel(cancellation));
  }),
  validateInput(value) {
    let v = parseInt(value);
    return isNaN(v)
      ? CANCEL('Invalid - Numbers plz :p')
    	: this.set('value', v);
  },
  handleThreeCase(value) {
    return value % 3 === 0 
      ? 'Fizz'
    	: '';
  },
  handleFiveCase(acc = '') {
    let b = this.get('value') % 5 === 0 
    	? 'Buzz' 
    	: '';
  	return acc + b;
  },
  handleAllOtherCases(acc = '') {
  	return acc === '' 
      ? CANCEL('Cancelled - Not divisible by 3 or 5') 
    	: acc;
  },
  thinking(result) {
    this.set('result', 'Checking printer ink levels...');
  	return timeout(1000)
      .then(() => result);
  },
  printResult(result) {
  	return this.set('result', result);
  },
  handleCancel(cancellation) {
  	switch (cancellation.fnName) {
      default:
        this.set('result', cancellation.reason);
        break;
    }
  },
  
  actions: {
  	calculate(...args) {
      return this.get('fizzBuzz').perform(...args);
    }
  }
});

templates.application.hbs

<h1>ember-pipeline demo</h1>

<p>Try different numerical values in the box below. <code>ember-concurrency</code> task support coming soon!</p>

{{input type="number" value=value}} 
<button onclick={{action "calculate" value}}>Calculate 🚂</button>

<p>
	<strong>Result:</strong>
  {{fizzBuzz.successfulSteps.length}} / {{fizzBuzz.steps.length}} successful steps
</p>
<pre>{{result}}</pre>

{{outlet}}

twiddle.json

{
  "version": "0.12.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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0",
    "skeleton-css": "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-pipeline": "0.3.3"
  }
}

utils.timeout.js

import Ember from 'ember';

const { 
  RSVP: { Promise },
  run: { later }
} = Ember;

export default function timeout(ms) {
  return new Promise((r) => later(r, ms));
}