Input value - how to use helper

Learning Team
1

I can’t find any information not figure out myself how to use a helper (or may there a better solution) to format the values I get from the backend.

So, I’m getting time durations in milliseconds, for ex.:

24737068
56597481, etc.

I tried to format/transform the values so that to be able to display them in inputs of type time in HH:mm format.

Here is the helper:

# helpers/human-time.js

import { helper } from '@ember/component/helper';
import moment from 'moment';

export function humanTime(millis) {
  if (typeof millis != 'undefined' && millis) {
    console.log(millis + ': ' + moment.utc(moment.duration(millis).asMilliseconds()).format('HH:mm'));
    return moment.utc(moment.duration(millis).asMilliseconds()).format('HH:mm');
  } else {
    console.log('else: ' + millis);
    return '';
  }
}

export default helper(humanTime);

Here is how I tried (with no success) to call it in a template:

# templates/components/weekday-row.hbs
<div class="col-sm-2">
    {{input type="time"
      class="form-control"
      min="06:00"
      max="22:00"
      disabled=isClosed
      pattern="[0-9]{2}:[0-9]{2}"
      value=(human-time dayRow.opens)
    }}

When I call the same formatting code defined in the helper from the Chrome console, it works as needed:

# Chrome console

moment.utc(moment.duration(56597481).asMilliseconds()).format('HH:mm');
=> "15:43"
  • What’s wrong with that ?
  • Is the syntax used in the template is correct ?
  • It seems like it is an array that is passed in to the helper instead of a single value and I never enter the else condition:
console.log('millis: ' + millis[0]);
=> undefined

Thank you.

2

Yes, the first argument is an array of positional parameters sent to the helper. You can check the Writing Helpers guide for more information.

Changing it to export function humanTime([millis]) { should fix it.

3

Yep, thank you for your help, - once again it got out of my head :slight_smile: Finally, I opted to use a trasform: I’m getting milliseconds from Rails and display them as HH:mm:

# trasforms/human-time.js

import DS from 'ember-data';
import moment from 'moment';

export default DS.Transform.extend({
  deserialize(serialized) {
    return moment.utc(moment.duration(serialized).asMilliseconds()).format('HH:mm');
  },

  serialize(deserialized) {
    return moment.duration(deserialized).asMilliseconds();
  }
});

and I removed the previously used helper and its call from the template.

1 Like
4

An alternative solution (if you want to preserve the original value from the server for example) is to add a computed property on your model that depends on your raw field and returns a new value based on that raw data.