Как обновить текстовый элемент после изменения свойства в Polymer 3?
Итак, я использую таблицу данных, в которой есть активный элемент. Когда этот активный элемент изменяется, я сохраняю имя активного элемента в свойстве моего полимерного элемента. Затем я отображаю это свойство String в div. Теперь я точно знаю, что изменение свойства работает, потому что я вывожу его в console.info после изменения, 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.info(this.currentProject);
});
}
}
Моим ожидаемым результатом было бы то, что каждый раз, когда обновляется свойство currentProject, div, отображающий обновление свойства, также обновляется.
Ответы 2
Контекст обратного вызова 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', ...);
})
Ваша сфера неверна. Вы используете анонимную функцию, поэтому, когда вы пытаетесь установить currentProject, вы делаете это, когда ваша this является вашей анонимной функцией. Используйте .bind(this), чтобы решить вашу проблему.
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.info(this.currentProject);
}.bind(this));