数据绑定功能未检测到对象数组的变化

Question

我有：

<template is="dom-repeat"
        initial-count="1"
        index-as="index"
        items="{{uploadState}}">
  <div hidden="[[getState(index)]]" class="layout vertical center-center">

我有：

  properties: {
    uploadState: {
      type: Array,
      value: function() {
        var arr = Array.apply(null, Array(1));
        var newArray = arr.map(()=> {
          return { value: false };
        });
        return newArray;
      },
      notify: true
    },
    getState: function(index) {
      var uploaded = this.get(['uploadState', index]);
      // use this.linksPath??
      return uploaded.value;
  }

并且：

changeState: function(index) {
  this.uploadState[index].value = true;
}

当我将 this.uploadState[0].value 更改为 false 时，hidden="[[getState(index)]]" 未检测到更改。

如何让 hidden 检测到变化？我读了这个 similar issue 但不确定我将如何使用 linkPath 。

Answer 1

您不能在具有数据绑定的 Polymer 中使用本机数组。 Polymer 有它自己的方式来映射内存中的数组元素，它无法检测到元素数组的变化。

相反，我不得不使用 Polymer api 来改变数组..this.get 和 this.set。这需要一些时间来适应，因为您需要像我对 uploadState.* 所做的那样将数组元素视为路径。

文档有点粗糙，因为 array.base() 没有 api 文档（至少我发现......不是 Polymer.base()）。

解决方案：

See Bind to an array item

 <div hidden$="{{getState(uploadState.*, index, 'value')}}">

...

    uploadState: {
      type: Array,
      value: function() {
        var arr = Array.apply(null, Array(1));
        var newArray = arr.map(()=> {
          return { value: false };
        });
        return newArray;
      },
      notify: true
    }
  },
  getState: function(change, index, path) {
    var uploaded = this.get(path, change.base[index]);
    return uploaded;
  },
  changeState: function() {
    this.set('uploadState.0.value', true);
  }

数据绑定功能未检测到对象数组的变化

Databinding function not detecting change in array of objects

polymer

polymer-1.0