无法将数据绑定到高分子2.0

Question

我想使用此代码从我<paper-input-container>获取用户输入：无法将数据绑定到<input>高分子2.0

<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