data-binding - Polymer 3 中的属性更改后如何更新文本元素?
问题描述
所以我正在使用一个具有活动元素的数据表。当该活性元素发生变化时,我将活性元素的名称存储在我的聚合物元素的属性中。然后我在一个 div 中显示这个 String 属性。现在我确定属性更改有效,因为我在更改后 console.log 它,显示属性的 div 不会更新并不断显示我设置的默认值。
export class ProjectsOverview extends PolymerElement {
static get template() {
return html`
...
<div>{{currentProject}}</div>
...
`
}
static get properties() {
return {
currentProject: {
type: String,
value: "placeholder",
notify: true,
reflectToAttribute: true
}
};
}
connectedCallback() {
super.connectedCallback();
const grid = this.shadowRoot.querySelector('vaadin-grid');
grid.addEventListener('active-item-changed', function(event) {
const item = event.detail.value;
grid.selectedItems = [item];
if (item) {
this.set('currentProject', item.name);
} else {
this.set('currentProject', '');
}
console.log(this.currentProject);
});
}
}
我的预期结果是,每次更新 currentProject 属性时,显示属性的 div 也会更新。
解决方案
active-item-changed
回调没有将其上下文绑定到 Polymer 实例(即,是this
网格而不是 Polymer 组件)。代替函数表达式,使用箭头函数自动绑定this
到正确的上下文。
// grid.addEventListener('active-item-changed', function(event) { // DON'T DO THIS
grid.addEventListener('active-item-changed', (event) => {
/* this is the Polymer instance here */
this.set('currentProject', ...);
})
推荐阅读
- html - 创建可复制的代码片段以嵌入 Rails 和 HTML
- java - 提交带有两个请求参数的表单时缺少参数错误
- python-requests - 仅使用密码使用 Python 请求
- python - 如何将列表元素写入不带括号的文本文件
- linux - docker容器内的java 8
- c# - 将开始日期和结束日期之间的所有日期插入表格
- python - 使用 python 在 db 上针对不同变量运行选择查询
- java - java.lang.ShortCache.cache 包含错误值
- sql - 如何为 SQL where 子句获取数字类型的月份开始和结束
- sql - 循环遍历列表逗号分隔的参数并根据逗号之前的每个值获取结果