Let's simplify things (assuming all includes and imports are correctly referenced).
Imagine you have a bindable variable of type Color on your view model (file.ts):
@bindable color: Color = Color.Green;
... and now you want to display it on the view (file.html):
<input type="text" value.to-view="color"></string-editor>
where Color is an enum defined like this (Color.ts):
export enum Color {
Red, Green, Blue
}
This will show the numerical value of the enum in the textbox, as shown here:
https://i.sstatic.net/wZu2y.png
If you wish to display the name of the enum value instead, like this:
https://i.sstatic.net/foPxv.png
You have two options...
1) Utilize a value converter
// enum-name-value-converter.ts
import { Color } from "color";
export class EnumNameValueConverter {
toView(value) {
return Color[value];
}
}
... and then use it in the view like this:
// file.html
<template>
<require from="enum-name-value-converter"></require>
<input type="text" value.to-view="color | enumName"></string-editor>
</template>
2) Make the enum accessible to the binding context using viewEngineHooks:
// enum-binder.ts
import { View, viewEngineHooks } from 'aurelia-framework';
import { Color } from 'color';
@viewEngineHooks
export class EnumBinder {
beforeBind(view: View) {
view.overrideContext["Color"] = Color;
}
}
... and then utilize it like this in the view:
// file.html
<template>
<require from="enum-binder"></require>
<input type="text" value.to-view="Color[color]"></string-editor>
</template>
Now for the question...
Is there a third alternative to achieve this? Is there a preferred or recommended approach?