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

Synchronize values of two paper-inputs on change event

本文关键字：两个 张输入 输入 事件 同步      更新时间：2023-09-26

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

<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);
    });
  });
  ...
});

我绝对认为这很丑陋。我确信，有一个正确的方法来实现目标，但我没有谷歌它，我完全被困住了。我想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>

提前谢谢。

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

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

普伦克在行动中展示它

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

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

相关文章：