Использование Numeral.js из HTML в Aurelia - PullRequest
Новая
       11

Использование Numeral.js из HTML в Aurelia

0 голосов
/ 06 декабря 2018

У меня есть следующий рабочий код 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>

Я хочу использовать библиотеку Numeral.js в HTML для форматирования общей переменной от 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, хотя.Я очень отзывчивый, поэтому не стесняйтесь задавать любые вопросы.

1 Ответ

0 голосов
/ 06 декабря 2018

Используйте конвертер значений, чтобы обернуть вызов в цифру.

Так будет выглядеть ваш преобразователь значений.Вам нужно будет добавить в файл правильный оператор импорта. 

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

...