Monthly Archives

December 2017

Aurelia: Powerful ValueConverters

By | Coding | No Comments

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:

constructor(){
   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>

Aurelia: Model.bind vs value.bind

By | Uncategorized | No Comments

Just wanted to quickly post about this because generally I only care about value.binding for form submissions.

However, I just realized now what the model bind is good for (show’s how often I have used it!). It will bind the whole array entry to the form-item selected.

Okay example time — if this is the set of option choices:
constructor(){
   this.options= [
      {id:1, text:'Option 1'},
      {id:2, text:'Option 2'},
      {id:3, text:'Option 3'}
   ];

   this.selectedOption=this.options[0];
}

 

And the code [with a little bootstrap formatting] (in page.html, etc):

<div class="form-group">
   <div repeat.for="option of option"class="radio">
      <label>
         <input type="radio" name="periodOptions" model.bind="option" checked.bind="$parent.selectedOption"/>
         ${option.text}
       </label>
   </div>
</div>

 

Visually here’s what that looks like (code for dumping the “selectedOption” is show in the GIST below.

A running simplified GIST of this (by the almighty Aurelia developer Jeremy Danyow) at:

https://gist.run/?id=84eb0949ff63c3f10a1eff3c337f2c97

Aurelia: Select2

By | Uncategorized | No Comments

I really like the power of the select2 element, and needed to use it in an aurelia project.

There are a few aurelia custom elements out there, but of those I saw, none gave a very simple, lightweight wrapper that would allow me to use HTML within the multi-select.

This attached code does, just include these bundles:

jspm install jquery
jspm install select2
jspm install bootstrap
jspm install npm:select2-bootstrap-theme

Inside your controller, there are 2 variables you need: the “selected” array and the options listing.

The options listing has 3 keys: “value” (the option value), “label” (the text-label), and “label_full” (the html label, if this not included, it uses the text label).

For example in mycontroller.js:

this.selectedArray = [];
this.optionsArray = [
{label: “Option 1”, label_full: “<i class=’glyph-icon icon-book’></i> Option 1”, value: 10},
{label: “Option 2”, label_full: “<i class=’glyph-icon icon-coffee’></i> Option 2”, value: 20} ];

Now in your aurelia template include the custom element:

<require from=”_select2″></require>

And add the tags where you are using them:

<select2 name=”selectList” selected.bind=”selectedArray” options.bind=”optionsArray” placeholder=”Rewards” allow_clear=”true” style=’font-size:150%;’></select2>
What you will end up with a a powerful multi-select that can even have icons, like this:
Grab the code here: