Add support for binding to non-standard HTML attributes

[srowan]

Consider the following scenario:

I am using an Aurelia view to render markup for a third party UI library. I will use the specific case of google material design lite context menu as an example : https://getmdl.io/components/index.html#menus-section

I've stripped out all but the relevant markup for an example that I expected to work for me:

<button id="${id}">Open Menu</button>
<ul for="${id}">
   <li>Menu Item</li>
</ul>

Associated stack overflow post:

http://stackoverflow.com/questions/38571557/binding-to-arbitrary-or-nonstandard-attributes-in-aurelia/38574417#38574417

As a newcomer to Aurelia, it is not clear to me why I can't bind to the "for" attribute of the UL. The workarounds are complex / difficult. I was eventually able to figure out the custom attribute approach, but it wasn't easy and felt like a huge step back from durandal / knockout.

I believe there needs to be out-of-the-box support for binding to arbitrary HTML attributes.

[jdanyow]

In knockout you'd use the attr binding to tell knockout you wanted to assign an HTML attribute.

I suppose we could take the binding behavior from my stackoverflow answer, rename it to attr and add it to the templating-resources module.

@EisenbergEffect thoughts?

[EisenbergEffect]

Yeah...and maybe just call it attr?

[jdanyow]

todo:

import {DataAttributeObserver} from 'aurelia-binding';

export class AttrBindingBehavior {
  bind(binding, source) {
    binding.targetObserver = new DataAttributeObserver(binding.target, binding.targetProperty);
  }

  unbind(binding, source) {}
}