时间戳

首页 > 解决方案 > 外部类调用一个LitElement组件方法（传递html模板），组件方法更新其html模板

javascript - 外部类调用一个LitElement组件方法（传递html模板），组件方法更新其html模板

问题描述

我需要一个包含游戏逻辑的外部类调用 LitElement 组件，并向其传递一个 html 模板文字，该组件将使用该组件来更新其自己的 html 模板文字的一部分。

在下面的代码中，您将看到navigationRender可以从组件内成功调用的组件 ( ) 的方法。同样的方法也可以从外部game类成功调用（如 console.log 所示）。但是，即使可以调用它，它也没有成功更新组件的 html 模板。

是否navigationRender需要在范围内进行某种回调firstUpdated？我在这里不知所措，如果这是需要的话，那么我不知道该怎么做......

下面是压缩成单个文件的代码。如果您单击“更改描述”按钮，那么您将看到 console.log 使用传递的 html 模板进行更新，而不是呈现的 html 文本。

<body>
  <front-end></front-end>
</body>

<script type="module">
  import { LitElement, html, css } from 'https://unpkg.com/lit-element?module';
  
  class FrontEnd extends LitElement {
    constructor() {
    super();
    this.renderDescription = html`<p>initialized - 01</p>`;
    }
    render() { 
      return [
        html`<button id="btn">Change Description</button>`,
        this.renderDescription]; 
    }
    firstUpdated() {
      this.game = new Game();
      this.navigationRender(html`<p>DESCRIPTION: So far, working when called from firstUpdated(). But what about when called from the Game class?</p>`);
      this.shadowRoot.getElementById('btn').addEventListener('click', (e) => {
        this.game.newDescription();
      });
    }
    navigationRender(description) {
      console.log(description);
      this.renderDescription = description;
      this.requestUpdate();
    }
  }
  customElements.define('front-end', FrontEnd);
  
  class Game {
    constructor() {
      this.frontEnd = new FrontEnd();
    }
    newDescription() {
      this.frontEnd.navigationRender(html`DESCRIPTION: Although the console.log verifies that this.frontEnd.navigationRender is being called and the data passed, that function is not able to actually update the this.renderDescription when called from the game class.`);
    }
  }
</script>

感谢您的帮助和建议！

标签： javascriptooplit-elementlit-html

解决方案

我想到了。希望这会对其他人有所帮助。

<body>
  <front-end id="fe-id"></front-end>
</body>

<script type="module">
  import { LitElement, html, css } from 'https://unpkg.com/lit-element?module';
  
  class FrontEnd extends LitElement {
    constructor() {
    super();
    this.renderDescription = html`<p>initialized - 01</p>`;
    }
    render() { 
      return [
        html`<button id="btn">Change Description</button>`,
        this.renderDescription]; 
    }
    firstUpdated() {
      this.game = new Game();
      this.navigationRender(html`<p>So far, working when called from firstUpdated(). But what about when called from the Game class?</p>`);
      this.shadowRoot.getElementById('btn').addEventListener('click', (e) => {
        this.game.newDescription();
      });
    }
    navigationRender(description) {
      console.log(description);
      this.renderDescription = description;
      this.requestUpdate();
    }
  }
  customElements.define('front-end', FrontEnd);
  
  class Game {
    constructor() {
      // this.frontEnd = new FrontEnd();
      this.element = document.getElementById('fe-id');
    }
    newDescription() {
      this.element.navigationRender(html`<p>YAY!!  THIS WORKS!!!</p>`);
    }
  }
</script>

推荐阅读