New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  yenConverter: Ember.inject.service(),
  actions: {
    switchCurrency(){
      this.get('yenConverter').switchCurrency();
    }
  }
});

helpers.format-currency.js

import Ember from 'ember';

//example of a function helper.  Not a class helper
export function formatCurrency([value, ...rest]) {
  let dollars = Math.floor(value / 100);
  let cents = value % 100;
  let sign = "$";
  if (cents.toString().length === 1) { cents = '0' + cents; }
  return `${sign}${dollars}.${cents}`;
}

export default Ember.Helper.helper(formatCurrency);

helpers.hash-helper.js

import Ember from 'ember';

//Hashes are useful for configuring the behavior of a helper.  NOTE: I set a default value if the hash value isn't provided.
export function hashHelper(params, hash) {
  let firstWord = hash.firstWord === undefined ?  "Good-Bye" : hash.firstWord;
  let secondWord = hash.secondWord == undefined ?   "Friend" : hash.secondWord;
  return `${firstWord} ${secondWord}!`;
}

export default Ember.Helper.helper(hashHelper);

helpers.parameter-helper.js

import Ember from 'ember';

//parameters are good for passing values
export function parameterHelper(params/*, hash*/) {
  let [ firstParam, secondParam ] = params;
  return `${firstParam} ${secondParam}!`;
}

export default Ember.Helper.helper(parameterHelper);

helpers.price.js

import Ember from 'ember';

//Class helper.  Implements compute and recompute.
//Uses Ember.String.html save to render html.
//Uses Ember.Handlebars.Utils.escapeExpression to escape values from the backend.
export default Ember.Helper.extend({
  yenConverter: Ember.inject.service(),
  compute(params, {price}) {
    //Needed to wrap $ and ¥ in double quotes.  Singles quotes caused problems.
    var symbol = this.get('yenConverter.isInDollars') ? "$" : "¥";
    var convertedPrice = this.get('yenConverter').exchange(price);
    var roundedPrice = Math.round(convertedPrice * 100)/100;
    return Ember.String.htmlSafe(`<b>${symbol}${Ember.Handlebars.Utils.escapeExpression(roundedPrice)}</b>`);
  },
  recomputeWhenChanged: Ember.observer('yenConverter.currentCurrency', 'yenConverter.exchangeRate', function(){
    this.recompute();
  })
});

services.yen-converter.js

import Ember from 'ember';

export default Ember.Service.extend({
  currentCurrency: 'Dollars',
  exchangeRate: 121.60,
  isInDollars: Ember.computed.equal('currentCurrency', 'Dollars'),
  exchange(dollarAmount){
    if(this.get('isInDollars')){
      return dollarAmount;
    } else {
      return dollarAmount * this.get('exchangeRate');
    }
  },
  switchCurrency(){
    if(this.get('isInDollars')){
      this.set('currentCurrency', 'Yen');
    } else {
      this.set('currentCurrency', 'Dollars');
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

Your total is {{format-currency 250}}.
<br>
Function helper, passing parameters: {{parameter-helper "Hello" "World"}}
<br>
Function helper, passing hash values: {{hash-helper  secondWord="World"}}
<br>

<div class="row">
  {{yenConverter.currentCurrency}} <button {{action 'switchCurrency'}}>Switch</button>,
  Yen per Dollar: {{input value=yenConverter.exchangeRate}}
</div>

{{price price="1.00"}}

twiddle.json

{
  "version": "0.10.4",
  "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.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}