聚合物纸输入不更新嵌套属性

Question

paper-input 是否支持嵌套属性？例如，

<paper-input label="FIRST NAME" value="{{client.name}}"></paper-input> //client object is updated
<paper-input label="LAST NAME" value="{{client.address.street}}"></paper-input> //client object is not updated

client.name 在用户将文本输入纸张输入时更新，但 client.address.street 在用户将文本输入纸张输入时不更新。即客户端对象只包含 {name: 'xxx} 而不是 {name: 'xxx', address: {street: 'abc'}}

是否有任何文档提到上述限制或我做错了什么？谢谢！

Answer 1

Polymer 不提供直接绑定到数组项的方法。对于嵌套范围，您必须使用 polymer（如 template repeaters）中的数据绑定辅助元素。

使用以下方法之一与数据绑定中的数组交互：

dom-repeat 辅助元素允许您为数组中的每个项目创建一个模板实例。在 dom-repeat 实例中，您可以绑定到数组项的属性。

<dom-repeat items="{{client}}" as="client">
  <template>
    <paper-input label="FIRST NAME" value="{{client.name}}"></paper-input>
    <paper-input label="LAST NAME" value="{{client.address.street}}"></paper-input>
  </template>
</dom-repeat>

iron-list 显示一个虚拟的 'infinite' 列表。 iron-list 元素内的模板表示要为每个列表项创建的 DOM。

<iron-list items="{{client}}" as="client">
  <template>
      <paper-input label="FIRST NAME" value="{{client.name}}"></paper-input>    
      <paper-input label="LAST NAME" value="{{client.address.street}}"></paper-input>
  </template>
</iron-list>

如果您初始化属性，即使用函数的对象或数组值，它将确保每个元素都有自己的值副本，而不是让对象或数组在所有实例之间共享元素。您不必像上面那样使用辅助元素：

client: {
    type: Object,
    value: function() {
           return {
            "name": "",
            "address": {
              "street": ""
           }
          };
        }
}

Demo

聚合物纸输入不更新嵌套属性

Polymer paper-input does not update nested property

polymer

polymer-2.x

聚合物纸输入不更新嵌套 属性

Polymer paper-input does not update nested property

polymer

polymer-2.x

聚合物纸输入不更新嵌套属性