Using web components in AU2?

vNext
8

The core of Aurelia for handling binding with various input elements is a list of predefined default behaviors built on top of extensible property-to-event handling model.

By this, I meant, by default, Aurelia is taught:

This shows we can teach Aurelia how to bind with any property of element via events, just like those built-in controls.

Example

I’ve prepared an example here with 3 scenarios:

  • DYI input element that communicate via a custom event named my-input-change
  • Polymer <paper input/> element
  • Polymer <paper-checkbox/> element

https://gist.dumber.app/?gist=0e58778ce7bb54c20fc31d49547649c9&open=src%2Fapp.js

Beware that <paper-input/> from Polyer seems to only dispatch change event on input change event, which means you need to hit Enter key, or focus away from the input for the value to be reflected.

Notes

1st note is while we can easily teach Aurelia how to bind with any element properties, it’s not easy to teach Aurelia how to interpret .bind command to two way or one way, that’s why you see in the demo that I explicitly used .two-way instead. It’s possible to teach Aurelia though it involves a bit of monkey patching so I’m not sure about doing it.

2nd note would be: this part is not well documented, so it would be awesome if you (or anyone) could help with that here https://github.com/aurelia/documentation/tree/master/current/en-us/4.%20binding if you found it helpful :beers: :kissing_cat:

3rd note would be: this capability/behavior is kept in v2, so what you learn in v1 here will be reusable for v2

4th note would be: In case you missed it, awhile ago I created a topic showing how to do 2way bindign with scroll position here # 17 Better know a framework: scroll position binding. It’s based on the same observation mechanism you see above. The code is here: https://github.com/aurelia/binding/blob/0d5b8183a7933ad22bdff03870f90902580a519f/src/event-manager.js#L281-L287

4 Likes