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属性返回一个格式化的值。

更新：我现在没有任何错误..但该组件未返回新值。

我在brocfile中添加了依赖项

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

我还在我的accounting文件中将formatMoney和.jshintrc添加到全局

它必须是组件内部的逻辑？也许它很简单

Answer 1

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

{{currency-widget value=debtor_balance}}

您有效地在组件上设置了一个等于debtor_balance的值属性。因此，请更新组件代码以访问组件＆＃34; value＆＃34;属性，而不是尝试将值传递给didInsertElement函数。

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

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

Ember JS：使用组件来包装accounting.js库

1 个答案: