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');
  }
}