polymère 2.0 liaison bidirectionnelle

Question

J'expérimente avec Polymer 2.0 et ai une classe simple. Il a une zone de texte de saisie qui ne répond pas lors de la modification de son contenu. Qu'est-ce qui est nécessaire pour refléter les modifications apportées à la zone de texte afin de refléter la liaison bidirectionnelle?

Le code de la classe est le suivant.

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

Je suppose que vous attendez greeting apparaître sous le <input> exactement que vous tapez. Vous aurez besoin d'utiliser two-way native binding sur l'événement de input<input>:

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

codepen