Ember JS: using a component to wrap accounting.js library - ember.js

Question

I am trying to wrap accounting.js into a component but i am missing something fundamental and getting an error.
Here is the each loop in my template:
{{#each item in model}}
{{#with item}}
{{#link-to 'debtor' debtor_id}}
<div>{{debtor_id}}</div>
<div>{{debtor_legacy_account_number}}</div>
<div>{{debtor_full_name}}</div>
<!-- below is the component call -->
<div>{{currency-widget value=debtor_balance}}</div>
<div>{{debtor_debt_number}}</div>
{{/link-to}}
{{/with}}
{{/each}}
and here is the component:
// app/components/currency-widget.js
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'span',
classNames: ['currency-widget'],
didInsertElement: function(value) {
return accounting.formatMoney(value);
}
});
as you can see, i want to have this component loop through and return a formatted value for each debtor_balance property passed to it.
Update: I don't have any errors now.. but the component is not returning the new value.
I added the dependency in my brocfile
app.import('vendor/accounting.js/accounting.min.js');
And I also included accounting and formatMoney to global in my .jshintrc file
It must be the the logic inside the component? maybe its something simple

Answer 1

I don't believe you can pass a value to the didInsertElement function, but you can still access properties that you set in the template when you define the component. When you say:
{{currency-widget value=debtor_balance}}
You're effectively setting a value property on the component that is equal to the debtor_balance. So update your component code to access the components "value" attribute, as opposed to trying to pass the value to the didInsertElement function.
export default Ember.Component.extend({
tagName: 'span',
value: 0,
classNames: ['currency-widget'],
didInsertElement: function() {
return accounting.formatMoney(this.get('value'));
}
});