前端框架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}