javascript - 在更改事件上同步两个 paper-input 的值

Question

我在 HTML 页面(以及其他网络组件)上有一个 polymer paper-input 元素。我需要监听它的值变化并修改另一个 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 应该可以解决问题，但我就是不知道如何实现。

使用绑定(bind)变量的明显代码由于某种原因不起作用:

<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

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