创建基本值转换器

Created: November-22, 2018

虽然值转换器可以由 toView 或 fromView 方法组成，但在下面的示例中，我们将创建一个基本的值转换器，它只使用 toView 方法，该方法接受作为第一个参数发送到视图的值。

到 uppercase.js

export class ToUppercaseValueConverter {
    toView(value) {
        return value.toUpperCase();
    }
}

使用它：

export class MyViewModel {
    stringVal = 'this is my test string';
}

<template>
    <require from="./to-uppercase"></require>

    <h1 textContent.bind="stringVal | toUppercase"></h1>
</template>

我们标题中的一个元素的文本值应该是 THIS IS MY TEST STRING 这是因为 toView 方法接受视图中的值并指定视图应该获取我们的新值，这是使用 String.prototype.toUpperCase()

在这种情况下，类名是 ToUppercaseValueConverter，其中 ValueConverter 告诉 aurelia 它是什么（还有一种 Anotations 的方法，但我没有在互联网上找到一个例子）。因此 ValueConverter 在类名中是必需的，但是通过调用转换器，这不再是必需的，因此你只需要在 html 模板中用 toUppercase 调用转换器。