Skip to content

Computed Property Macros

Jason Mitchell edited this page Feb 3, 2018 · 17 revisions

New to 6.0.0, is computed property composition to allow for a familiar API to native momentjs methods. All of the computed property macros support the same arguments and ordering as detailed in the moment API.

Supported APIs:

  • format
  • moment
  • calendar
  • fromNow
  • toNow
  • duration
  • humanize
  • tz
  • locale

Moment/Format/Locale

import _moment from 'ember-moment/computeds/moment';
import format from 'ember-moment/computeds/format';
import locale from 'ember-moment/computeds/locale';

export default Ember.Component.extend({
  moment: Ember.inject.service(),
  createdOn: new Date('01/02/2016'),
  createdOnFormatted: format(
    locale(
      _moment('createdOn'),
      'moment.locale'
    ),
    'MMMM DD, YYYY'
  )
});

From Now

import _moment from 'ember-moment/computeds/moment';
import fromNow from 'ember-moment/computeds/from-now';

export default Ember.Component.extend({
  computedFromNow: fromNow(
    _moment('12-25-1995', 'MM-DD-YYYY'),
    false
  ), // -> 2 years ago
});

To Now

import _moment from 'ember-moment/computeds/moment';
import toNow from 'ember-moment/computeds/to-now';

export default Ember.Component.extend({
  computedToNow: toNow(
    _moment('12-25-1995', 'MM-DD-YYYY'),
    false
  ), // -> in 20 years
});

Calendar/TimeZone

import calendar from 'ember-moment/computeds/calendar';
import tz from 'ember-moment/computeds/tz';

export default Ember.Component.extend({
  moment: Ember.inject.service(),
  computed: calendar('2013-01-01T02:30:26Z', '2013-01-01T12:00:00Z'), // -> Yesterday at 6:30 PM
  tzExample: calendar(tz('2013-01-01T02:30:26Z', 'America/New_York'), '2013-01-01T12:00:00Z'), // -> Yesterday at 9:30 PM
});

Duration/Humanize

import duration from 'ember-moment/computeds/duration';
import humanize from 'ember-moment/computeds/humanize';

export default Ember.Component.extend({
  moment: Ember.inject.service(),
  computedDuration: humanize(duration(10, 'hours')), // -> '10 hours'
  globalLocalizedDuration: humanize(locale(duration(10, 'hours'), 'moment.locale')), // -> 10 hours
  globalLocalizedDuration: humanize(locale(duration(10, 'hours'), 'fr')), // -> 10 heures
});
Clone this wiki locally