Post Demo

application.controller.js

import Ember from 'ember';
import { formatDate, formatPhone } from '../format-macros';

export default Ember.Controller.extend({
  localeService: Ember.inject.service('locale'),
  formattedPhone: formatPhone('model.phone'),
  formattedDate: formatDate('model.date', 'L')
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return {
      phone: '555-555-555',
      date: new Date()
    };
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
Phone: {{model.formattedPhone}} <br>
Date: {{model.formattedDate}} <br>
<br>

format-macros.js

import Ember from 'ember';
import { formatPhone as formatPhoneFunc, formatDate as formatDateFunc } from './format-utils';

let { get, computed } = Ember;

export var formatPhone = function(valueKey) {
  debugger;
  let deps = [ 'localeService.locale', valueKey];
  return computed(...deps, function() {
    let locale = get(this, 'localeService.locale');
    return formatPhoneFunc(get(this, valueKey), locale);
  });
}

export var formatDate = function(valueKey, format) {
  let deps = [ 'localeService.locale', valueKey];
  return computed(...deps, function() {
    let locale = get(this, 'localeService.locale');
    return formatDateFunc(get(this, valueKey), format, locale);
  });
}

format-utils.js

export var formatPhone = function(value, locale) {
  debugger;
  return locale + ':' + value;
}
export var formatDate = function(value, format, locale) {
  return locale + ':' + value + ' in ' + format;
}

helpers.formatDate.js

import { observer } from 'Ember';

export default Ember.Helper.extend({
  localeService: Ember.inject.service('locale'),
  onLocaleChange: observer('localeService.locale', function() {
    this.recompute();
  }),
  compute(value, format) {
    return this.get('localeService').formatDate(value, format);
  }
});

helpers.formatPhone.js

import { observer } from 'Ember';

export default Ember.Helper.extend({
  localeService: Ember.inject.service('locale'),
  onLocaleChange: observer('localeService.locale', function() {
    this.recompute();
  }),
  compute(value) {
    return this.get('localeService').formatPhone(data);
  }
});

locale.service.js

import Ember from 'ember';
import { formatPhone, formatDate } from '../format-utils';

export default Ember.Service.extend({
  locale: 'en',
  setLocale(locale) {
    this.set('locale', locale);
  },
  formatPhone(value) {
   return formatPhone(value, this.get('locale'));
  },
  formatDate(value, format) {
    return formatDate(value, format, this.get('locale'));
  }
});

twiddle.json

{
  "version": "0.4.14",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.1.0",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "2.1.0"
  }
}