成员JS:使用组件包装accounting.js库

Question

我试图将accounting.js封装到一个组件中，但是我缺少了一些基本的东西，并且得到了一个错误。

下面是我模板中的每个循环：

{{#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}}

以下是组件：

// 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);
    }
});

如您所见，我希望通过这个组件循环，并为传递给它的每个debtor_balance属性返回一个格式化的值。

更新：，我现在没有任何错误。但是组件没有返回新值。

我在我的兄弟文件中添加了依赖项

app.import('vendor/accounting.js/accounting.min.js');

我还在我的accounting文件中将formatMoney和.jshintrc文件包含到了.jshintrc文件中。

它一定是组件内部的逻辑？也许是很简单的事情

Answer 1

我不相信您可以将一个值传递给didInsertElement函数，但是您仍然可以访问在定义组件时在模板中设置的属性。当你说：

{{currency-widget value=debtor_balance}}

您实际上是在组件上设置一个与debtor_balance相等的值属性。因此，更新组件代码以访问组件" value“属性，而不是试图将值传递给didInsertElement函数。

export default Ember.Component.extend({
    tagName: 'span',
    value: 0,
    classNames: ['currency-widget'],

    didInsertElement: function() {
        return accounting.formatMoney(this.get('value'));
    }
});