数据绑定功能不检测对象

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为假hidden="[[getState(index)]]"没有检测到变化。

我将如何使hidden检测到更改？我读了这similar issue，但不知道我将如何使用linkPath对此。

Answer 1

您无法在具有数据绑定的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); 
    }