Two-way data binding between the polymer component and the model?

Question

Before using Polymer, I would like to check that you can do two-way data binding between a component and a javascript model. I read the data binding section on the website, but this point is still not clear.

A simple example: if I have an “audio” model with the “volume” property in javascript, can I bind this volume property to a slider, for example?

I am more familiar with JavaFx, and it usually uses JavaFx code to do the trick: slider.valueProperty().bindBidirectional(audio.volumeProperty()) . After completion, any changes made by the user on the slider are reflected on the model, as well as any change made by the application on the model is reflected on the slider.

So now in javascript, if I have var audio = { volume: 75, ... } , is it possible to associate the volume property of this model, for example, with the value of the paper slider?

Answer 1

Yes it is possible. Here you have an example with a simple model:

 <template is="auto-binding"> <paper-slider min="10" max="200" value="{{audio.volume}}"></paper-slider> <h1>Current volume: {{audio.volume}}</h1> </template> <script> var audio = {volume: 42, stereo: true, title: "A beautiful song"}; var template = document.querySelector('template[is="auto-binding"]'); template.audio = audio template.status =0; template.statusIsOn = function(value) { if (value.status >0) return value.count; return 0; }; </script> 

You have a working Plunker here: http://plnkr.co/edit/YkyHRIn9ETrNz0vGTPK6?p=preview

If you need more information, feel free to ask!