0

HTMLページにポリマーpaper-input要素があります（他のWebコンポーネントの中でも）。その値の変更をリッスンし、別の Web コンポーネントのプロパティを変更する必要があります。簡単にするために、2 つの同期入力が必要だとします。これまでのところ、私は持っています：

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

プランカーはそれを実際に示しています

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

編集: カスタム要素の外側で宣言型バインディングを使用するには、自動バインディング テンプレートが必要であることを反映するように回答を更新します。また、テンプレートにバインドされたイベントが発生するまで、自動バインド テンプレート内の要素にアクセスできないことにも注意してください。

于 2015-01-11T02:11:58.133 に答える