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

时间:2019-05-29 12:28:44

标签: data-binding polymer polymer-3.x

所以我正在使用一个具有活动元素的数据表。当活动元素更改时,我将活动元素的名称存储在我的聚合物元素的属性中。然后,我在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也将更新。

2 个答案:

答案 0 :(得分:2)

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', ...);
})

答案 1 :(得分:1)

您的范围是错误的。您正在使用匿名函数,因此当您尝试设置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));