Uncategorized

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.

constructor(){
   this.options= [
      {id:1, text:'Option 1'},
      {id:2, text:'Option 2'},
      {id:3, text:'Option 3'}
   ];

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

<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>

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:

And add the tags where you are using them:

What you will end up with a a powerful multi-select that can even have icons, like this:

Welcome, and thank you for coming.

In the last few years I’ve been hyper-involved with a plethora of technologies at some start-up companies. It’s been challenging and fun but at the same time stressful. My developers seemed to do things in a way that was not flexible to change, nor optimized for the situation.

Maybe I had the wrong people, but maybe I had to learn something.

So I started to re-learned all the latest client-side frameworks, and wow have solutions matured in a way that makes it much easier to package clean solutions.

But there’s one problem. There are too MANY javascript/client-side frameworks out there.

Our adventure into this over the next while is to first build a service that scans the whole web to find what frameworks are being used … from this I can at least figure out and suggest what is really worth knowing. Part of this challenge is going through the effort of an idea and boiling it down into a full-scale web solution. And I’ll share a good chunk of the code with you on github.

And after that it will be a top-down analysis of what the frameworks really have to offer and how future-proof they are.

We are going to be discussing the big guys in detail – Angular, Angular2, Angular4, React, Vue-JS, and Aurelia (not as popular, but a nicely done framework that is fairly clean ECMAScript 6 without boilerplate code).