属性值更改后点亮元素不更改视图答案

【问题标题】：lit-element not changing view after property value change属性值更改后点亮元素不更改视图
【发布时间】：2021-06-28 19:25:30
【问题描述】：

为简洁起见删除了一些代码...

基本的简单元素

@customElement("simple-el")
export class SimpleEl extends LitElement {
  @property() user = "joe";

  render() {
    return html`<p>Hello, ${this.user}!</p>`;
  }
}

调用元素

import "./scratch.ts";

@customElement("doos-main")
export class Doos extends LitElement {
 
  @property() selName = "JOHN";


  constructor() {
    super();

  }

  render() {
    return html`<link rel="stylesheet" href="../css/bulma.min.css" />
      <doos-nav token="${this.token}"></doos-nav>
      <simple-el user="${this.selName}"></simple-el>

      //this displays a button and calls _buttonClick correctly
      ${this.renderView(this.view)} 

      <doos-footer name="FOOTER"></doos-footer>`;
  }


  _buttonClick(e: Event) {
    console.log(e);
    this.selName = "CHANGED!";
  }

}

当我单击按钮时，我更改了selName 的属性值，我的想法是SimpleElement.user 绑定到selName。所以更改selName 应该将视图显示为Hello CHANGED!!

但是这不起作用。我得到的是原版：Hello JOHN!

我也试过打电话给async/await this.requestUpdate();

我的想法和/或实施是否错误？

编辑：我可能应该补充一点，我正在使用 deno 的捆绑命令来构建我的 JS。

deno 包 --unstable --watch -c ./tsconfig.json ./mod.ts ./mod.js

这里是 tsconfig：

{
  "compilerOptions": {
    "lib": ["dom", "deno.ns"]
  }
}

【问题讨论】：

我认为看起来不错。你确定this 在_buttonClick 中引用了Doos？
它在类定义中，所以我认为我在这里得到了正确的范围，但也许我可以花一些时间来验证
您能否在_buttonClick 中控制台登录this 以确保绑定正确？如果没有，您能否分享您对this.renderView(this.view) 的实现，以便更容易发现您可能遇到问题的地方？另外，你用什么来编译你的装饰器？我知道有时 babel 会在这上面丢球，并且没有正确关联更新流程。
属性更改后需要使用this.requestUpdate。看到这个jsabarinath.wordpress.com/2020/01/19/…

标签： typescript lit-element deno lit-html

【解决方案1】：

属性与属性不同，如果您将这些发光属性的反射设置为 true，它们只会双向反射。这可能就是为什么对 selName 的更改不会让您使用更新的 user 属性重新渲染 simple-el，因为您只更改了它的属性部分。

<simple-el user="${this.selName}"></simple-el>

应该使用 lit 属性绑定

<simple-el .user="${this.selName}"></simple-el>

https://lit-element.polymer-project.org/guide/templates#bind-properties-to-templated-elements

【讨论】：

是的，你是对的，但这并没有解决我的问题

【解决方案2】：

遗漏了一些重要信息。 _buttonClick 设置的调用如何。这很可能没有绑定到类对象。 javascript 中的this 可以重新分配，并且可能有点意外来自另一种语言。

class Person {
  phrase = "Hello There!"

  speak(){
    console.log(this.phrase)
  }
}

const person = new Person();

person.speak(); // This returns "Hello There!"

const speak = person.speak;

speak(); // this gives you `Uncaught TypeError: Cannot read property 'phrase' of undefined`

这可以通过多种方式解决。

确保使用箭头语法(e) => _buttonClick(e) 设置事件回调
使用 bind 确保 this 指向类 _buttonClick.bind(this)

class Person2 {
  phrase = "Hello There!";

  constructor(){
    this.speak = this.speak.bind(this)
  }

  speak(){
    console.log(this.phrase)
  }
}

const person2 = new Person2();

const speak2 = person2.speak;

speak(); // This returns "Hello There!"

【讨论】：

我将 _buttonClick 更改为：` _buttonClick = (e: Event) => { console.log(e); this.selName = "已更改！";控制台.log(this.selName); };` 在恢复函数后也没有运气：this._buttonClick.bind(this); 在构造函数中它不起作用

【解决方案3】：

它对我有用。见here。

这可能无法正常工作。

//this displays a button and calls _buttonClick correctly
  ${this.renderView(this.view)}

或者问题可能与

deno bundle --unstable --watch -c ./tsconfig.json ./mod.ts ./mod.js

【讨论】：