폴리머 2.0 양방향 바인딩

Question

나는 폴리머 2.0을 실험하고 있으며 간단한 클래스를 가지고있다. 내용을 변경할 때 응답하지 않는 입력 텍스트 상자가 있습니다. 양방향 바인딩으로 반영하기 위해 텍스트 상자의 변경 내용을 반영하려면 무엇이 필요합니까?

클래스의 코드는 다음과 같습니다.

<!-- Styles MUST be inside template --> 
<style> 
</style> 

<div> 
    <input type="text" id="greeting" name="greeting" value="{{greeting}}"/> 
    <slot></slot> 
    {{greeting}} 
</div> 

// Extend Polymer.Element base class 
class Polymer2Class extends Polymer.Element { 
    static get is() { return 'polymer-2-class' } 
    static get config() { 
    return { 
     properties: { 
     greeting: { 
      type: String, 
      value: "Hello", 
      notify: true 
      //observer: 'greetingChanged' 
     } 
     }, 
     observers: [ 
     'greetingChanged(greeting)' 
     ] 
    } 
    } 
    constructor() { 
    super(); 
    console.log('created'); 
    } 
    connectedCallback() { 
    super.connectedCallback(); 
    console.log('attached'); 
    } 
    ready() { 
    this.addEventListener('click', (e)=>this.handleClick(e)); 
    this._ensureAttribute('tabIndex', 0); 
    super.ready(); 
    console.log('ready'); 
    } 
    greetingChanged(greeting) { 
    if(greeting === undefined) { 
     console.log("greetingChanged: undefined"); 
    } else { 
     console.log("greetingChanged: " + greeting); 
    } 
    } 
    handleClick(e) { 
    console.log("hamdleClick: " + e.type); 
    } 

// Register custom element definition using standard platform API 
customElements.define(Polymer2Class.is, Polymer2Class); 

Answer 1

<input> 정확히 아래에 greeting이 나타나면을 입력 할 것으로 예상됩니다. 당신은 <input>의 input 이벤트에 two-way native binding를 사용해야합니다 : 나는 {{인사 ::의 keyup}}`대신 당신은 또한`쓸 수 있습니다 언급 할 가치가 있다고 생각

<input type="text" value="{{greeting::input}}"> 

codepen