は、データは2.0

Question

私はこのコードを使用して、私の<paper-input-container>からのユーザ入力を取得しようとしていますが、ポリマー中のにバインドできません関数は：

keypressed(e) { 
    console.log(this.first); 
} 

私はそれは<paper-input>要素で動作するようになりましたが、私が望むようにスタイルを設定することはできませんでした。 Polymer 2.0の紙入力でユーザー入力のテキストサイズを増やす方法が分かっている場合は、それも役立ちます。

Answer 1

ポリマーのchange notificationは、ネイティブ<input>が続かないという命名規則イベントが必要なため、双方向のデータは、あなたが求めて結合ここに示すように、special syntaxが必要です。あなたの場合

target-prop="{{hostProp::target-change-event}}" 

、それは次のようになります。

<input value="{{first::input}}> 

これはinputイベントは<input>から発生時valueに等しいfirstを設定するためにポリマーを告げます。これは同等です：

また

const inputEl = this.shadowRoot.querySelector('input'); 
inputEl.addEventListener('input',() => this.first = value); 

demo

、あなたが<input>のvalueを反映し、<iron-input>.bindValueにfirstをバインドすることができます：

<iron-input bind-value="{{first}}"> 
    <input> 
</iron-input> 

demo

yの場合OUはまた

のフォントサイズを助けるポリマー2.0で紙入力のユーザ入力テキストサイズを大きくする方法を知っている<paper-input>のインナー<input><paper-input-container>の--paper-input-container-input CSSプロパティでスタイリングすることができます。

<dom-module id="x-foo"> 
    <template> 
    <style> 
     paper-input { 
     --paper-input-container-input: { 
      font-size: 40px; 
     }; 
     } 
    </style> 
    <paper-input label="My label" value="My value"></paper-input> 
    </template> 
</dom-module> 

demo