如何为Polymer 3.0中的属性和子属性执行“批量属性更改”
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何为Polymer 3.0中的属性和子属性执行“批量属性更改”相关的知识,希望对你有一定的参考价值。
以此代码为例:
class DemoElement extends PolymerElement {
static get template() {
return html`
<p>[[abc]]</p>
<p>[[def]]</p>
<p>[[obj.a]] [[obj.b]]</p>
<button on-click="test">test</button>
`;
}
constructor() {
super();
this.abc = 1;
this.def = 9;
this.obj = {
a: 1,
b: 2,
}
}
test() {
this.setProperties({ abc: this.abc + 1, def: this.def + 1 });
this.set('obj.a', this.obj.a + 1);
this.set('obj.b', this.obj.b + 2)
}
}
customElements.define('demo-element', DemoElement);
根据https://polymer-library.polymer-project.org/3.0/docs/devguide/data-system#batched-property-changes,看起来我可以批量更改DOM,但是当我在测试事件处理程序中设置断点时,Polymer观察者仍然会触发三次,那么如何使它只触发一次?
编辑:起初我认为它与dom修改有关,实际上并非如此。每个ui框架/库都必须单独更改dom元素,但浏览器会自动批量处理这些更改。
答案
关于什么:
test() {
this.setProperties({
abc: this.abc + 1,
def: this.def + 1,
obj: {
...this.obj,
a: this.obj.a + 1,
b: this.obj.b + 2,
}
});
}
另一答案
我意识到我实际上问的是聚合物观察者,但起初我认为它是关于dom修改的。因此,Polymer Documatation中的“批量属性更改”是关于观察者触发的,但我误解了这是对dom的修改。所以这个问题应该关闭。
以上是关于如何为Polymer 3.0中的属性和子属性执行“批量属性更改”的主要内容,如果未能解决你的问题,请参考以下文章