javascript - 如何对 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 观察者仍然触发 3 次,那么如何让它只触发 1 次呢?
编辑:起初我以为它与 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,
}
});
}
推荐阅读
- terraform-provider-aws - 如何为 terraform 中的有限索引运行 count.index
- python - 尝试安装 Python brute 时出错
- matlab - 如何从 Google Drive 中读取图像
- c# - Linq 在大数据集上的查询性能
- python - 如何使用 Python 从 TKinter 的 Treeview 中的列中获取所有值
- flutter - 如何让listview按钮转到随机路线onTap
- python-3.x - 张量流错误:ValueError:层顺序的输入0与层预期轴-1不兼容
- javascript - Sequelize findOrCreate(...).spread 不是函数
- html - 如何以适合 jquery 的数组格式显示来自 tweepy 的这些结果
- python - 如何训练具有多标签数据的分类器?