8

我正在使用计算属性items作为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);
},

如果我不是 mutating 而是values将它设置为一个新数组,它确实有效:

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

这是错误还是预期行为?

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

4

1 回答 1

10

我与 Polymer 团队的成员 Scott Miles 进行了交谈,我得到了回复:

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

传递给您的double函数的参数将是一个具有属性pathvalue和的对象base,就像在路径观察中一样。

  • path将引用一个路径字符串,该字符串指定是否lengthsplices已在数组中更新,
  • value将是lengthor的值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引用本身更改时更新,而不是在数组中的项目更改时更新。Usingvalues.*让 Polymer 知道它应该在数组的内容发生变化时更新计算的属性绑定。


如果不是为了

sjmiles:@vartan:otoh,如果你能把你学到的东西抄录下来,那会对我有帮助,时间是我最没有弹性的资源

于 2015-06-04T18:26:41.807 回答