aurelia Value Converters Creating A Basic Value Converter

Example

While Value Converters can be comprised of either a toView or fromView method, in the below example we will be creating a basic Value Converter which just uses the toView method which accepts the value being sent to the view as the first argument.

to-uppercase.js

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

Using it:

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

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

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

The text value of our heading one element should be THIS IS MY TEST STRING this is because the toView method which accepts the value from the view and specifies that the view should get our new value which are are using String.prototype.toUpperCase()

The class name is in this case ToUppercaseValueConverter, where ValueConverter tells aurelia what it is (There is also a method with Anotations, but I didn't find an example on the internet). So the ValueConverter is necessary in the class name, but by calling the converter, this isn't necessary anymore, therefor you need to call the converter only with toUppercasein the html template.