Aurelia: Powerful ValueConverters

By December 16, 2017Coding

This post is a quick observation of how flexible the valueconverters feature is. I won’t cover what valueConverters are because that is well covered else where (Eisenberg’s post).

However, I wanted to show a flexible use of. Let’s say the template row is returning an array of keys, which correspond to a list:

   this.optionList = [
       { value: 10, label: "Option 10", icon: "<i class='glyph-icon icon-coffee></i>" },
       { value: 20, label: "Option 20", icon: "<i class='glyph-icon icon-leaf></i>" },
       { value: 30, label: "Option 30", icon: "<i class='glyph-icon icon-star></i>" }
   this.selectedIdSet = [10,30];

export class LabelizeValueConverter {
   toView(valueArray, listArray) {
      var html = '';
      for(let val of valueArray){
         for( let i of listArray ){
            if( i.value==val )
               html += i.value+' '+i.icon+' ';
      return html;

Now we can even pass in that array of options into the value converter (useful if we multiple option arrays we can use, and we want to use the same valueConverter).

<span innerhtml.bind="selectedIdSet | labelize: optionList"></span>

Leave a Reply