변경 이벤트에서 두 개의 용지 입력 값 동기화

Question

다른 웹 구성 요소 중에서 HTML 페이지에 폴리머 paper-input 요소가 있습니다. 가치 변화를 듣고 다른 웹 구성 요소의 속성을 수정해야합니다. 단순화를 위해 두 개의 동기화 된 입력이 필요하다고 가정 해 봅시다. 지금까지 내가 가지고있는 것 :

<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); 
    }); 
    }); 
    ... 
}); 

분명히보기는 좋지 않습니다. 나는 목표를 달성하는 적절한 방법이 있다고 확신하지만, 나는 그것을 Google에 실패하고 나는 완전히 붙어있다. 내가 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

편집

는 행동을 보여줍니다 맞춤 요소에는 자동 바인딩 템플릿이 필요합니다. 템플릿 바인딩 된 이벤트가 발생할 때까지는 자동 바인딩 템플릿 내부의 요소에 액세스 할 수 없다는 점도 유의해야합니다.