在更改事件中同步两个纸张输入的值

Question

我在 HTML 页面（以及其他网络组件）上有一个聚合物 paper-input 元素。我需要监听它的值变化并修改另一个 webcomponent 的属性。为了简单起见，假设我需要两个同步输入。到目前为止，我有：

<paper-input id="fst" label="First" floatinglabel="First"></paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second"></paper-input>

我想让他们的值一路同步。目前我使用以下代码来实现这一点：

document.addEventListener('polymer-ready', function() {
  ['#fst', '#snd'].forEach(function(el) {
    document.querySelector(el).addEventListener("change", function(e) {
      var value = document.querySelector(el).value;
      //                     ⇓⇓⇓⇓⇓⇓⇓ in pseudocode: other element
      document.querySelector(XOR(el)).setAttribute('value', value);
    });
  });
  ...
});

我绝对看出这很丑陋。我敢肯定，有一种正确的方法可以实现目标，但我没有 google 它，我完全被困住了。我想 observes 应该可以解决问题，但我就是想不通。

由于某些原因，使用绑定变量的明显代码不起作用：

<paper-input id="fst" label="First" floatinglabel="First" value="{{ value }}">
</paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second" value="{{ value }}">
</paper-input>

提前致谢。

Answer 1

您可以使用声明性方法，只需使用类似

的方法

<template is="auto-binding">
  <paper-input id="fst" label="First" floatinglabel="First" value="{{value}}"></paper-input>
  <paper-input id="snd" label="Second" floatinglabel="Second" value="{{value}}"></paper-input>    
</template>

plunker 在行动中展示它

http://plnkr.co/edit/3cxdOYKciKRBzROHQzgM?p=preview

编辑：更新答案以反映在自定义元素外部使用声明性绑定需要自动绑定模板。还值得注意的是，在触发模板绑定事件之前，无法访问自动绑定模板内的元素。

在更改事件中同步两个纸张输入的值

Synchronize values of two paper-inputs on change event

javascript

polymer

web-component

paper-elements