属性值更改后，lit-element 不会更改视图

如何解决属性值更改后，lit-element 不会更改视图

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

基本简单元素

@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 bundle --unstable --watch -c ./tsconfig.json ./mod.ts ./mod.js

这里是 tsconfig：

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

解决方法

省略了一些重要信息。 _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!"

,

属性与属性不同，如果您将那些点亮的属性设置为 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

,

它对我有用。见here。

这可能无法正常工作。

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

或者问题可能与

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