属性绑定

Permalink to "属性绑定"

目前，设置 <rating-element> 的 rating 的唯一方式是构造元素，在对象上设置 rating 属性，然后将其放到页面上。遗憾的是，这并不是原生 HTML 元素的工作方式。原生 HTML 元素倾向于同时响应属性和 attribute 的变化来更新。

通过添加以下代码，使自定义元素在 rating 属性变化时更新视图：

private _rating = 0;

set rating(value) {
  this._rating = value;

  if (!this.shadowRoot) {
    return;
  }

  const ratingEl = this.shadowRoot.querySelector<HTMLElement>('.rating');

  if (ratingEl) {
    ratingEl.innerText = `${this._rating}`;
  }
}

get rating() {
  return this._rating;
}
_rating = 0;

set rating(value) {
  this._rating = value;

  if (!this.shadowRoot) {
    return;
  }

  const ratingEl = this.shadowRoot.querySelector('.rating');

  if (ratingEl) {
    ratingEl.innerText = `${this._rating}`;
  }
}

get rating() {
  return this._rating;
}
  1. 移除 constructor。
  2. 声明一个私有 _rating 属性，设置为 0。
  3. 为 rating 属性添加 setter 和 getter。
  4. 如果可用，则更新 rating 元素的文本。

这意味着如果你在元素上设置 rating 属性，视图将会更新；在你的开发者工具控制台中快速测试一下！选中 <rating-element>，然后将 rating 属性设置为 5。

$0.rating = 5