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

发布时间：2020-12-13 20:07:38 所属栏目：百科来源：网络整理

导读：我正在使用计算属性作为dom-repeat的项目. template is="dom-repeat" items="{{double(values)}}" span{{item}}/span/template 当其依赖项值更改时,不会重新计算该属性. addValue: function() { this.push('values',this.values.length+1); this.async(this.

我正在使用计算属性作为dom-repeat的项目.

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

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

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

如果我将其设置为新数组,而不是改变值,它确实有效：

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

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

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

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

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

传递给double函数的参数将是具有属性path,value和base的对象,就像路径观察一样.

> path将引用一个路径字符串,指定数组中是否更新了长度或接头,
> 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模板期望使用集合,因此当您直接将其绑定到值时,它知道要在值中标记项目.

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

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

sjmiles: @vartan: otoh,if you could transcribe what you learned,it would help me,time is my least elastic resource

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!