聚合物组件和模型之间的2种数据绑定方式? [英] 2 way data-binding between a polymer component and a model?

问题描述

在使用Polymer之前，我想检查一下是否可以在组件和javascript模型之间进行两种方式的数据绑定.我在网站上阅读了数据绑定部分，但这一点我仍然不清楚.

一个简单的例子:如果我在javascript中有一个带有"volume"属性的音频"模型，是否可以将此音量属性绑定到滑块?

我对JavaFx更加熟悉，这通常是可以完成技巧的JavaFx代码:slider.valueProperty().bindBidirectional(audio.volumeProperty()). 一旦执行，用户在滑块上所做的任何更改都会反映到模型上，而应用程序在模型上所做的任何更改也会反映到滑块上.

所以现在在javascript中，如果我有var audio = { volume: 75, ... }，是否可以将此模型的volume属性绑定到例如纸张滑块的值?

解决方案

是的，有可能. 这里有一个带有简单模型的示例:

<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>

您在这里有工作的Plunker: http://plnkr.co/edit/YkyHRIn9ETrNz0vGTPK6?p =预览

如果您需要更多信息，请随时询问！

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?

解决方案

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!

这篇关于聚合物组件和模型之间的2种数据绑定方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！