Внешний класс вызывает метод компонента LitElement (передает шаблон html), а метод компонента обновляет свой шаблон html - PullRequest
Новая
       44

Внешний класс вызывает метод компонента LitElement (передает шаблон html), а метод компонента обновляет свой шаблон html

0 голосов
/ 28 марта 2020

Мне нужен внешний класс, состоящий из игровых логик c, вызывающий компонент 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>

Спасибо за вашу помощь и предложения!

1 Ответ

1 голос
/ 28 марта 2020

Я понял это. Надеюсь, это поможет кому-то еще. 

<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>
...