Question

我在HTML页面上有一个聚合物paper-input元素（以及其他web组件）。我需要听取它的价值变化并修改另一个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

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

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

1 个答案: