0

我paper-input在 HTML 页面上有一个聚合物元素（在其他 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>

提前致谢。

4

1 回答 1

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

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

于 2015-01-11T02:11:58.133 回答