2 way data-binding between a polymer component and a model?

问题

Before using Polymer, I would like to check that it's possible to do a 2 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 to me.

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

I'm more familiar with JavaFx and here is typically the JavaFx code that would do the trick: slider.valueProperty().bindBidirectional(audio.volumeProperty()). Once executed, any change made by the user on the slider is reflected to the model, and also any change made by the application on the model is reflected to the slider.

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

回答1:

Yes, it's 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, don't hesitate to ask!

来源：https://stackoverflow.com/questions/27721040/2-way-data-binding-between-a-polymer-component-and-a-model

标签

polymer