Aurelia - 转换器

• 

  简述

  如果您需要在 Aurelia 应用程序中转换某些值，您可以使用converters而不是手动将值转换为所需的格式。
• 

  转换日期

  当我们想将默认日期值转换为某种特定格式时，我们可以使用momentJS图书馆。这是一个用于操作日期的小型库。

  
  C:\Users\username\Desktop\aureliaApp>jspm install moment
  

  让我们创建一个新文件converters.js. 我们将使用此文件添加转换器特定代码。使用以下命令或手动创建文件。

  
  C:\Users\username\Desktop\aureliaApp>touch converters.js
  

  转换器.js

  在这个文件中，我们将导入moment图书馆和集合DateFormatValueConverter仅返回月、日和年值而不返回其他数据。需要注意的重要一点是，Aurelia 可以识别任何以ValueConverter. 这就是为什么我们的类名是DateFormatValueConverter. 此类将注册为dateFormat我们稍后可以在视图中使用它。

  转换器.js

  
  import moment from 'moment';
  export class DateFormatValueConverter {
     toView(value) {
        return moment(value).format('M/D/YYYY');
     }
  }
  

  在app.js，我们将只使用当前日期。这将是我们的视图模型。

  应用程序.js

  
  export class App {
     constructor() {
        this.currentDate = new Date();
     }
  }
  

  我们已经讨论过require在custom-elements章节。管道符号 | 用于应用转换器。我们只使用dateFormat因为这就是 Aurelia 的注册方式DateFormatValueConverter.

  应用程序.html

  
  <template>
     <require from = "./converters"></require>
     <h3>${currentDate | dateFormat}</h3>
  </template>
  

  
• 

  转换货币

  这是货币格式的示例。你会注意到这个概念和上面的例子是一样的。首先，我们需要安装numeral图书馆从command prompt.

  
  C:\Users\username\Desktop\aureliaApp>jspm install numeral
  

  转换器将设置货币格式。

  转换器.js

  
  import numeral from 'numeral';
  export class CurrencyFormatValueConverter {
     toView(value) {
        return numeral(value).format('($0,0.00)');
     }
  }
  

  View-model 只会生成一个随机数。我们将使用它作为货币价值并每秒更新一次。

  应用程序.js

  
  export class App {
     constructor() {
        this.update();
        setInterval(() => this.update(), 1000);
     }
     update() {
        this.myCurrency = Math.random() * 1000;
     }
  }
  

  我们的视图将显示随机生成的数字转换为货币。

  应用程序.html

  
  <template>
     <require from = "./converters"></require>
     <h3>${myCurrency | currencyFormat}</h3>
  </template>