無法將數據綁定到<input>高分子2.0

Question

我想使用此代碼從我<paper-input-container>獲取用戶輸入：

<paper-input-container id="nameInput"> 
    <label slot="label">Your name</label> 
    <iron-input slot="input"> 
    <input on-keydown="keypressed" value="{{first}}" id="nameBox"> 
    </iron-input> 
</paper-input-container> 

在我properties，我有：

static get properties() { 
    return { 
    first:{ 
     type:String, 
     value:'' 
    } 
    } 
} 

和我keypressed功能是：

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

我已經能夠得到它與<paper-input>元素一起工作，但我無法按照我想要的方式進行設計。如果您知道如何增加聚合物2.0中紙張輸入的用戶輸入文字大小，那也是有幫助的。

Answer 1

聚合物的change notification需要事件命名約定本地<input>不遵循，所以數據綁定，雙向尋求需要special syntax，如下所示：

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

在你的情況，這將是：

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

這告訴聚合物設置first等於value當input事件從<input>發生。這相當於：

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

demo

或者，你可以綁定first到<iron-input>.bindValue，這反映了value<input>的：

<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