前端框架Aurelia - Value Converter

1.Value Converter

Aurelia的value converter的改进：

1. The Aurelia ValueConverter interface uses toView and fromView methods, which make it quite clear which direction the data is flowing. This is in contrast to Xaml's IValueConverter, which uses Convert and ConvertBack.

Aurelia的value converter用toView和fromView方法来标识数据流方向。

2.In Aurelia, converter parameters can be data-bound. This is something that was missing in Xaml and enables more advanced binding scenarios.

转换的参数可以被数据绑定。

3.Aurelia value converter methods can accept multiple parameters.

Aurelia的值转换方法可以接受多参数。

4.Multiple value converters can be composed using pipes (|).

多个值转换可以用 | 。

2.Simple Converters

http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-value-converters/3

Well, first we created a couple of value converters: DateFormatValueConverter and CurrencyFormatValueConverter. Each has a toView method that the Aurelia framework will apply to model values before displaying them in the view. Our converters use the MomentJS and NumeralJS libraries to format the data.

toView方法，aurelia框架在view上显示values前会先向ValueConverter申请model values。

Next, we updated the view to require the converters so they can be used in the view. When requiring a resource such as a value converter, you supply the path to the resource in the require element's from attribute.

要引入文件的意思咯。

<require from="./date-format"></require>
<require from="./currency-format"></require>

When Aurelia processes the resource, it examines the class's metadata to determine the resource type (custom element, custom attribute, value converter, etc). Metadata isn't required, and in fact our value converters didn't expose any. Instead, we relied on one of Aurelia's simple conventions: export names ending with ValueConverter are assumed to be value converters. The convention registers the converter using the export name, camel-cased, with the ValueConverter portion stripped from the end.

Aurelia有一个简单的约定，我们用ValueConverter来作为value converter文件名的结尾。

• DateFormatValueConverter registers as dateFormat
• CurrencyFormatValueConverter registers as currencyFormat

Finally, we applied the converter in the binding using the pipe | syntax:

下面的代码是给value converter绑定变量，这样就是哪个value converter format 哪个变量。

${currentDate | dateFormat} <br/>
${netWorth | currencyFormat}