当数组依赖项发生变异时,不会重新计算计算属性

Question

我正在使用计算属性作为itemsa dom-repeat.

<template is="dom-repeat" items="{{double(values)}}">
  <span>{{item}}</span>
</template>

当其依赖项values更改时,不会重新计算该属性.

addValue: function() {
  this.push('values', this.values.length+1);
  this.async(this.addValue, 1000);
},

如果values我将其设置为新数组而不是变异,它确实有效:

this.set('values', this.values.concat(this.values.length+1))

这是一个错误还是预期的行为？

演示:http://plnkr.co/edit/SmAHKMHhSPWgmBhBBzAv？p =preview

Answer 1

我采访了聚合物背后的团队成员斯科特迈尔斯,我得到了回报:

为了使计算属性正确绑定,您必须使用[[double(values.*)]].

传递给你的参数double功能将与属性的对象path,value和base,就像在路径观察.

• path将引用一个路径字符串,指定数组中是否length或splices已更新,
• value将是的值length或splices和
• base 将引用您的数组.

例:

<template is="dom-repeat" items="[[double(values.*)]]">
  <span>[[item]]</span>
</template>

<script>
  ...
  double: function(e) {
    return e.base.map(function(n) { return n*2; });
  }

文档:https://www.polymer-project.org/1.0/docs/devguide/properties.html#array-observation

演示:http://plnkr.co/edit/Idrz5XvLn9SZ35iR8pGT？p = preview

一个dom-repeat模板期望与集合来工作,因此当你将其绑定到values直接,它知道要密切关注的项目values.

计算属性没有任何这样的期望,因此[[double(values)]]在这种情况下不起作用,因为它只会在values引用本身更改时更新,而不是在数组中的项更改时更新.使用values.*let Polymer知道它应该在数组的内容发生变化时更新计算属性绑定.

如果不是的话,我不会在斯科特这里发布这个

sjmiles:@vartan:otoh,如果你可以转录你学到的东西,它会对我有所帮助,时间是我最不具弹性的资源