Polymer.js v3.0异步fetch后DOM未更新问题求助

问题根源 #

你遇到的问题核心是：fetch的.then回调里的this默认不指向Polymer元素实例，导致你修改的hideSection不是元素的响应式属性；另外如果hideSection没在元素的属性声明里定义，Polymer也不会监听它的变化来更新DOM。

解决方案 #

1. 确保回调中的this指向元素实例

用箭头函数绑定外层作用域的this，或者用.bind(this)强制绑定回调的this：

// 方式1：箭头函数（推荐）
fetch('your-api-url')
  .then(response => response.json())
  .then(data => {
    // 这里的this就是Polymer元素实例
    this.hideSection = false;
  });

// 方式2：bind绑定
fetch('your-api-url')
  .then(function(response) { return response.json(); })
  .then(function(data) {
    this.hideSection = false;
  }.bind(this));

2. 声明hideSection为响应式属性

必须在Polymer元素的static get properties()中定义该属性，让Polymer监听其变化并更新DOM：

class YourElement extends Polymer.Element {
  static get is() { return 'your-element'; }

  static get properties() {
    return {
      hideSection: {
        type: Boolean,
        value: true, // 初始值
        // 可选：如果需要把属性值同步到DOM元素的属性上，设为true
        // reflectToAttribute: true
      }
    };
  }

  // 其他元素逻辑...
}
customElements.define(YourElement.is, YourElement);

3. 手动触发属性更新（极端场景）

如果前两步都做了还是不生效，可以用Polymer提供的set方法手动触发变更通知，确保DOM更新：

fetch('your-api-url')
  .then(response => response.json())
  .then(data => {
    // 用set方法更新属性，强制触发变更监听
    this.set('hideSection', false);
  });

内容的提问来源于stack exchange，提问作者John Cooper