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);
  }

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

1 个答案: