聚合物 - 如何覆盖计算的属性?
问题描述:
如何覆盖计算的属性?聚合物 - 如何覆盖计算的属性?
这里有一个片段,其中的父类A
计算result
属性等于value
财产,而它的子类B
将重新计算result
属性等于value + value2
。
但覆盖不工作...
class A extends Polymer.Element {
static get properties(){
return {
value : Number,
result : {
type : Number,
computed : "computeProperty(value)"
}
}
}
computeProperty(value){
return value;
}
}
class B extends A {
static get is() { return "b-element"; }
static get template(){
return `
<div>Value : [[value]]</div>
<div>Value2 : [[value2]]</div>
<div>Result : [[result]]</div>
`
}
static get properties(){
return {
value2 : Number,
result : {
type : Number,
computed : "recomputeProperty(value, value2)"
}
}
}
recomputeProperty(value, value2){
return value + value2;
}
}
// Register the new element with the browser
customElements.define(B.is, B);
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<b-element value="1" value2="2">
</b-element>
答
我不认为这是可能的,但你可以做的是利用观察员:
static get properties() {
return {
// ...
result : {
type : Number,
// making the result read-only because it's computed
readOnly : true,
}
}
}
static get observers() {
return ['onValueChanged(value, value2)']
}
onValueChanged(value, value2) {
this.setProperties({
result : value + value2
}, true);
}
**这真的是个坏主意**,因为** [计算函数的参数是函数的依赖关系](https://www.polymer-project.org/2.0/docs/devguide/ob服务器#限定-A计算的属性)**。这意味着,当作为函数的参数放置的其中一个属性发生更改时,这将直接触发计算函数以重新计算计算出的属性。 在你的情况下,'result'属性是静态的,并且如果'value'或'value2'改变,将永远不会重新计算。 – Yairopro
这是真的,但我认为你不能让它表现得那样。你可以做的是创建一个观察者,观察这两个值并相应地更新结果。我更新了答案。 – Elar
这个答案好多了!但仍然不是我正在寻找的东西。因为在我无法编辑父类的代码并重新实现计算其属性的方式(使用lcomplex-listener而不是计算属性)的情况下,这不是一个解决方案。 – Yairopro