npm 包 @nilz/aurelia-converters 使用教程

介绍

@aurelia-converters 是一个为 Aurelia 前端框架设计的插件。它提供了一些预定义的 Converter 类和 ValueConverters，用于将值从一种格式转换为另一种格式。这些工具主要用于界面绑定，帮助我们展示正确的数据类型和格式。此外，@aurelia-converters 还包括一些用于国际化和本地化处理的工具。

安装

使用 npm 包管理器进行安装：

$ npm install @nilz/aurelia-converters

然后，将其添加到 Aurelia 项目的 main.js 导入列表中：

import '@nilz/aurelia-converters';

使用

Converter 类

Converter 是回调函数的集合，这些函数用于将一个值从一种格式转换为另一种格式。下面展示了如何在 Aurelia 组件中使用 Converter：

<template>
  <h2>${age} in years is ${ageInMonths} months and ${ageInDays} days.</h2>
</template>

-- -------------------- ---- -------
------ - -------- - ---- --------------------
------ - ---------- ------------ - ---- ---------------------------

------ ----- ----------- -
  --------- ----

  ------------
  ----------

  ------------- -
    ----------------- - --- ---------------
  -

  -------------------- -
    ---------------- - -------------------------------------
    -------------- - -----------------------------------
  -
-
展开代码

ValueConverters

ValueConverters 和 Converter 有些类似，但是它们是独立的 JavaScript 类，而不是回调函数方法。通过装饰器模式，我们可以将它们附加到绑定表达式上。

<template>
  <h2>${num1} + ${num2} = ${num1 + num2 | currency:"USD"}</h2>
</template>

import { bindable } from 'aurelia-framework';
import { ValueConverter, currency } from '@nilz/aurelia-converters';

export class MyComponent {
  @bindable num1;
  @bindable num2;
}

内置的 ValueConverters

@aurelia-converters 包括一些构建于 ValueConverter 之上的内置 ValueConverters。这些 ValueConverters 用于解析字符串、格式化日期、本地化等等。

以下代码演示了如何在模板中使用内置的 ValueConverters：

<template>
  <h2>Today is ${new Date() | date}</h2>
  <h2>${"1234" | number}</h2>
  <h2>Today is ${new Date() | date:'shortDate'}</h2>
  <h2>${"1.23" | number:'2':'$':'USD'}</h2>
  <h2>${1000 | bytes}</h2>
</template>

结语

@aurelia-converters 为开发者提供了一些很有用的工具和函数，帮助我们更舒适地处理各种数据类型和格式。希望这个库能够帮助到你的开发工作！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554e081e8991b448d2139