gpt4 book ai didi

javascript - 外部类调用 LitElement 组件方法(传递 html 模板),组件方法更新其 html 模板

转载 作者:行者123 更新时间:2023-12-02 21:19:15 35 4
gpt4 key购买 nike

我需要一个由游戏逻辑组成的外部类,调用 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>

感谢您的帮助和建议!

最佳答案

我明白了。希望这对其他人有帮助。

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

关于javascript - 外部类调用 LitElement 组件方法(传递 html 模板),组件方法更新其 html 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60895876/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com