0

我对我正在处理的特定元素有疑问。由于某种原因，这个不允许我在 html 标记上指定任何属性值。

如果我在构造函数中指定默认值，那么该元素可以与这些默认值一起正常工作，但我无法通过声明性 html 覆盖默认值。

这是元素：

class OstinatoFetchTriggers extends LitElement {
  static get properties() {
    return {
      /**
        * The query selector for the `ostinato-fetch` element to use when
        * making the request.
        */
      xhrSelector: { type: String },

      /**
      * Elements with the trigger selector will have their click event
      * intercepted and will make the request via ostinato-fetch
      */
      triggerSelector: { type: String },
    };
  }


  constructor() {
    super();
    this.xhrSelector = '#xhrContent';
    this.triggerSelector = '[xhr-link]';
  }

  connectedCallback() {
    super.connectedCallback();

    // The output for console log below is null or whatever the default was in the contructor.
    console.log(this.triggerSelector);

    var triggerList = document.querySelectorAll(this.triggerSelector);
    triggerList.forEach((trigger) => {
      trigger.addEventListener('click', this._handleXhrClick.bind(this));
    });
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    var triggerList = document.querySelectorAll(this.triggerSelector);
    triggerList.forEach((trigger) => {
      trigger.removeEventListener('click', this._handleXhrClick.bind(this));
    });
  }

  _handleXhrClick(ev) {
    ev.preventDefault();
    this.triggerRequest(ev.currentTarget.href);
  }

  triggerRequest(href) {
    document.querySelector(this.xhrSelector).fetch(href);
  }
}

customElements.define('ostinato-fetch-triggers', OstinatoFetchTriggers);

我尝试像这样使用上面的元素：<ostinato-fetch-triggers xhr-selector="#somethingElse"></ostinato-fetch-triggers>.

我期望元素中的 xhrTriggers 属性应该是#somethingElse，但事实并非如此。它基本上只是使用构造函数的默认值。

4

1 回答 1

2

第一：由于 lit-element 没有像 Polymer 2 中那样通过将驼峰大小写转换为破折号大小写来将属性名称映射到属性名称的概念。因此，如果您声明xhrSelector，则必须使用：

<ostinato-fetch-triggers xhrSelector="#somethingElse"></ostinato-fetch-triggers>

第二：connectedCallback是本机生命周期回调，不是来自lit-element这意味着不能保证它调用时lit-element已经设置了属性。您可以使用firstUpdated(changedProperties)或者update(changedProperties)如果您想在每次属性更改时做出反应。

查看更多关于 lit-element生命周期的信息。

第三：在disconnectedCallback中，您似乎想删除侦听器，但这不起作用，因为每次执行bind函数时它都会返回新函数，这意味着您尝试删除以前从未添加过的函数。

您应该将侦听器保留在某个变量中

let listener = this._handleXhrClick.bind(this)
trigger.addEventListener('click', listener)
this.listeners.push({ trigger, listener })

然后在disconnectedCallback

this.listeners.forEach(({ trigger, listener }) => {
  listener.removeEventListener('click', listener)
})
于 2018-10-12T22:03:08.610 回答