@estos/estos-databinding-behavior
v3.0.1
Published
Synchronizes changes in POJOs to Polymer properties. The databinding is comparable to Polymer 0.5.
Downloads
3
Readme
estos-databinding-behavior
Synchronizes changes in POJOs to Polymer properties. The databinding is comparable to Polymer 0.5.
Usage
Since Polymer 1.0 there isn't any implicit data binding anymore and you have to usePolymer.set
, Polymer.push
, etc. to propagate changes in your model to the GUI.
If you are using a third party library or want to keep your code separated from your webcomponents you can use this behavior to bind the models to your Polymer elements.
Example
To enable binding add EstosDataBindingBehvior
to your behaviors and define which
properties should be bound. For example:
Polymer({
is: 'test-element',
behaviors: [
EstosBehaviors.EstosDataBindingBehavior
],
properties: {
contact: {
type: Object,
boundProperties: [
'firstname',
'details.email',
'details.addresses'
]
}
}
...
The behavior will listen to all paths defined in boundProperties
and will notify the
Polymer element of any updates. For example this template will be in sync with your POJOs regardless
how they are changed:
<h1>[[contact.firstname]]</div>
<template is="dom-repeat" items="[[contact.details.addresses]]">
<div>[[item.street]]</div>
</template>
A more in depth demo is included in the source code.
Known limitations
It uses observe.js to listen for changes in the model, so there is a need for dirty-checking in every other browser than Chrome. At the moment it will automatically check every 300ms.
It will notify structure changes of an array (add, remove, resort), but it will not notify deep changes like
contact.details.addresses[0].street = 'test'
. As a workaround create a new element foraddress
, define bindings tostreet
in that element and just use the new address element indom-repeat
.
TODO
- The dirty-checking should be optional and configurable