在Aurelia中使用HTML中的Numeral.js

Question

我有以下工作的Aurelia代码：

​

total = 9000;

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${total}</div>
</div>

​

我想要做的是使用HTML中的Numeral.js库来格式化从9000到9000.00的总变量。这就是我尝试过的：

​

total = 9000;

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${numeral(${total}).format('0.00')}</div>
</div>

​

以及以下各点：

​

total = 9000;

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">numeral(${total}).format('0.00')</div>
</div>

​

但不幸的是，没有一种方法奏效。我尝试在TypeScript中使用数字库，它工作得很好。不过，我需要这个HTML。我有很强的反应，所以不要犹豫问任何问题。

Answer 1

使用值转换器结束对数字的调用。

这就是您的值转换器的样子。但是，您必须将正确的导入语句添加到文件中。

import numeral from 'numeral';

export class CurrencyFormatValueConverter {
  toView(value, format = '0.00') {
    return numeral(value).format(format);
  }
}

然后，需要使用require元素将值转换器加载到视图中。

<require from="./path/to/file'></require>

然后你可以在你的视野中使用它。

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${total | numeral }</div>
</div> 

也可以将自定义格式作为参数传递，以覆盖默认值：

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${total | numeral:'($0,0.00)' }</div>
</div> 

顺便说一句，您应该看看我们的文档，因为它实际上包括了这个确切的值转换器，作为它的示例之一：https://aurelia.io/docs/binding/value-converters#value-converters