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

Question

我在HTML页面（以及其他webcomponents中）有一个聚合物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); 
    }); 
    }); 
    ... 
}); 

我绝对看到这是丑陋的。我相信，有一个适当的方法来实现目标，但我没有谷歌，我完全卡住了。我想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

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