Menu
I've been reading up on web components and am pretty intrigued by the nascent spec. Does anyone know if there is any support for 2-way data binding in the DOM, without having to use Polymer? An example would be appreciated.
389
This in itself is a valid point, but nevertheless data binding is easy to achieve for Web Components as I will demonstrate in this article. Data binding was first made popular by frameworks like Angular, Backbone and Ember and is now more or less the de facto way of writing views.
One of the major features of angular is two-way data binding in components. But, Angular also focuses on splitting the work into smaller components. Now there can be situations where you have split your task into the smaller components but then you come up with another requirement that you also want two-way data binding between your components.
For two-way data binding to work, the @ Output () property must use the pattern, inputChange, where input is the name of the @ Input () property. For example, if the @ Input () property is size, the @ Output () property must be sizeChange. The following sizerComponent has a size value property and a sizeChange event.
Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components. See the live example / download example for a working example containing the code snippets in this guide.
Object.observe is a potential new way to do databinding in javascript. This feature is scheduled for Ecmascript 7(javascript), but some browsers currently support it, check here. Also check out this html5rocks article on object.observe
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
