Simplify Currency Input Component

Design
1

I’m writing a tutorial where I show how to build an invoice application with push updates. The application assumes all money amounts are in cents to prevent rounding issues. Since humans prefer working with euros I made a custom component that transforms between cents and euros.

It accepts euro values as input and also displays them as euros but internally the amount is actually stored in cents.

I have it all working perfectly fine, a component wraps an input element and you only have to pass in an ID attribute (so labels work) and the desired value in cents. But I’m wondering if this can be accomplished in a simpler and more Ember like way.

So if you have any ideas on how to improve this example I would be very grateful!

Thanks, David

1 Like
2

Hi David,

What about putting both <label> and {{input}} in the component and give the input a name and reference it’s elementId in your label? Something like this:

<script type="text/x-handlebars" data-template-name="components/currency-input">
  <label {{bind-attr for=input.elementId}}>Amout (in euro):</label>
  {{input value=inputValue viewName='input'}}
</script>
3

Hi wecc,

that’s certainly a nice solution! Do you have a documentation link for the viewName attribute? I found no mention of it in the docs.

4

http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#toc_code-viewname-code-property