如何将对象的子属性与 Polymer 中的纸张输入绑定

Question

我的一个 Polymer 组件中有一个对象属性 (newcontact) 和函数 (saveContact):

properties: {
  newcontact: {
    type: Object
  }
},
saveContact: function() {
  console.log(this.newcontact); // Getting undefined
},

我想通过 <paper-input> 数据绑定将子属性添加到 newcontact，如以下代码所示：

<label class="form-control-label">Name</label>
<paper-input type="text" name="name" is="iron-input" value="{{newcontact.name}}"></paper-input>

<label>Email</label>
<paper-input type="text" name="email" is="iron-input" value="{{newcontact.email}}"></paper-input>          

<label>Phone</label>
<paper-input type="text" name="phone" is="iron-input" value="{{newcontact.phone}}"></paper-input>           
<paper-input hidden is="iron-input" value="{{newcontact.id}}"></paper-input>
<input type="button" value="Save" on-click="saveContact" class="btn btn-primary">

但是 saveContact() 总是记录 undefined this.newcontact。这是为什么？

Answer 1

您正在使用输入字段设置 newcontact 对象的属性。但是，该对象从未被初始化。您可以在 properties 定义中通过给它一个值来做到这一点。

properties:{
    newcontact:{
        type: Object,
        value: function() {
            return {};
        }
    }
},

如何将对象的子属性与 Polymer 中的纸张输入绑定

How to bind object's subproperties with paper-input in Polymer

javascript

data-binding

polymer

polymer-1.0