如何在 Polymer 3 属性更改后更新文本元素？

Question

所以我使用的是具有活动元素的数据 table。当该活动元素发生变化时，我将活动元素的名称存储在我的聚合物元素的属性中。然后我在 div 中显示此字符串属性。现在我确定属性更改有效，因为我 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 也会更新。

Answer 1

active-item-changed 回调没有将其上下文绑定到 Polymer 实例（即，this 是网格而不是 Polymer 组件）。使用 arrow function 来自动将 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', ...);
})

Answer 2

你的范围是错误的。您正在使用匿名函数，因此当您尝试设置 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.log(this.currentProject);
      }.bind(this));

如何在 Polymer 3 属性更改后更新文本元素？

How to update text element after property change in Polymer 3?

data-binding

polymer

polymer-3.x

如何在 Polymer 3 属性 更改后更新文本元素？

How to update text element after property change in Polymer 3?

data-binding

polymer

polymer-3.x

如何在 Polymer 3 属性更改后更新文本元素？