полимер 2.0 двустороннее связывание

Question

Я экспериментирую с Polymer 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

Я предполагаю, что вы ожидаете, что greeting появится ниже <input> точно по мере того, как вы наберете его. Вы должны будете использовать two-way native binding на <input> «s input событие:

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

codepen