Friday, June 24, 2016

I love Aurelia - Data binding always just works

Today, I needed to add a Twitter Bootstrap Tooltip to my Aurelia app. Easy enough, just create a custom attribute to handle the javascript registering and unregistering, then add the data- attributes to make it all work.

Except, this tooltip contains the password rules, and I want to use it in several places on my app. I don't want to create another custom attribute, I just want to bind the title to a value from my viewmodel.

So I write:

<input type="password" value.bind="password" bootstrap-tooltip 
       data-container="body" data-html="true" data-placement="bottom" data-toggle="tooltip" 
       title.bind="passwordRules">

and, of course, it just works. That's what I love about the syntax of Aurelia. They don't have to think of every use-case, they built the right abstraction in the first place.

FYI, if you get here looking for how to do the custom attribute, here's that code (thanks to Jeremy Danyow):
import {inject} from 'aurelia-framework';
import $ from 'jquery';
import 'bootstrap';

@inject(Element)
export class BootstrapTooltipCustomAttribute {
  constructor(element) {
    this.element = element;
  }

  bind() {
    $(this.element).tooltip();
  }

  unbind() {
    ${this.element).tooltip('destroy');
  }
}

2 comments:

Anonymous said...

Now, try to do it dynamic:) I mean title can change.

Ben said...

Wow is good to be back with my ex again, thank you Dr Ekpen for the help, I just want to let you know that is reading this post in case you are having issues with your lover and is leading to divorce and you don’t want the divorce, Dr Ekpen is the answer to your problem. Or you are already divorce and you still want him/her contact Dr Ekpen the spell caster now on (ekpentemple@gmail.com) and you will be clad you did