Question

我在聚合物组件中有一个类型为array的属性“dataArray”。这个数组有另一个数组“items”。我正在使用dom-repeat来遍历“dataArray”，并且还有一个嵌套的dom-repeat来循环遍历“dataArray”中每个对象的“items”数组。

dataArray看起来像

[{'name': 'abc', items: [{'name': 'abc1'} , {'name': 'abc2'}]}, 
 {'name': 'xyz', items: [{'name': 'xyz1'} , {'name': 'xyz2'}]}
]

dataArray: {
          type: Array,
          value: function() {
             return [];
          },
          notify: true
        }

observers: [_dataArrayChanged(dataArray.*)']

模板：

<template class="" is="dom-repeat" items="{{dataArray}}" as="d">
       <p> {{d.name}} </p>
       <template class="" is="dom-repeat" items="{{d.items}}" as="item">
            <p>{{item.name}}</p>
       </template>
</template>

第一次加载组件时，它可以正常工作。

当'dataArray'发生变化时，更改不会反映在嵌套的“dom-repeat”中。

有什么建议吗？

Answer 1

您可以阅读polymer's doc：

如果使用本机方法操作数组（例如   Array.prototype.push），你可以在事后通知Polymer。

每个Polymer元素都有以下数组变异方法   可用的：


push（path，item1，[...，itemN]）

pop（路径）

unshift（path，item1，[...，itemN]）

shift（路径）

splice（path，index，removeCount，[item1，...，itemN]）


只要可能，您应该始终使用Polymer的数组变异   方法即可。但是，这并不总是可行的。例如，你可能是   使用不使用Polymer的数组变异的第三方库   方法。在这些情况下，您可以在每个之后调用notifySplices   突变以确保观察阵列的任何聚合物元素都是   正确通知了这些变化。

所以，我创建了一个jsfiddle给你一个例子：

对于像你这样的数组：

dataArray: {
      type: Array,
      value: function(){
        return [
          {
            name: 'abc', 
            items: [
              {'name': 'abc1'} , 
              {'name': 'abc2'}
            ]
          }, 
          {
            name: 'xyz', 
            items: [
              {'name': 'xyz1'} , 
              {'name': 'xyz2'}
            ]
          }
        ];
      }
    }

添加值有两种可能性

1）使用Polymer的arrau突变方法：

   addArray:function(){
    this.push('dataArray',{
      name: 'new', 
      items: [
        {'name': 'new1'} , 
        {'name': 'new2'}
      ]
    });
  }

  removeArray:function(){
    this.splice('dataArray', this.dataArray.length-1, 1);
  }

使用原生方法：

   addArray2:function(){
    this.dataArray.push({
      name: 'new', 
      items: [
        {'name': 'new1'} , 
        {'name': 'new2'}
      ]
    });
    this.notifySplices('dataArray');
  }

  removeArray2:function(){
    this.dataArray.splice(this.dataArray.length-1, 1);
    this.notifySplices('dataArray');
  }

如果我没有犯错，那么对于Polymer 2.0来说也是如此。（语法除外）

Polymer 1.x - 对数组中嵌套数组的更改不会反映在模板

1 个答案: