繁体   English   中英

Lit-Element不允许我在html中设置属性值

Lit-Element doesn't let me set property value in html

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在处理的特定元素有问题。 并且由于某种原因,该选项不允许我在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 ,但事实并非如此。 它基本上只使用构造函数中的默认值。

1 个回复

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

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

第二: connectedCallback是不是从lit-element发出的本机生命周期回调 ,这意味着无法保证何时调用lit-element已经设置了属性。 如果您希望每次更改属性时都做出反应,则可以使用firstUpdated(changedProperties)update(changedProperties)

查看更多有关轻元素生命周期的信息


第三:在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)
})
3 lit-html / lit-element 中的类似 React 的引用?

lit-html 有没有像 React 的ref功能那样的变化? 例如,在下面的伪代码中inputRef将是一个回调函数或一个对象{ current: ... }其中 lit-html 可以在创建/附加输入元素时传递/设置输入元素的 HTMLElement 实例。 // that #ref pse ...

7 将HTML加载为lit-element中的单独文件

可以使用lit-scss-loader这样的东西从外部文件加载样式: 但是,我不知道如何从外部文件加载HTML内容。 (类似于Angular允许您使用内联HTML或从文件中拉入它的方式。) 我尝试了以下方法: 是否缺少我想要的Webpack加载程序来实现这种可能性? 我 ...

10 如何在 lit-element 中声明必需的属性

在PropTypes ,我们可以使用PropTypes将特定的 prop 标记为必需的。 Vue 还支持所需的道具: 如何在 lit-element 中做到这一点? 一个框架声称它非常好,但不支持诸如必需属性之类的简单事物,这真是太有趣了。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM