javascript - lit-html:连接字符串以使用 html``

Question

我正在使用 lit-element 编写一个 Web 组件，我想知道如何在变量内部渲染一个字符串，该变量仍然具有完整的 @click 监听器，并且使用 html“处理器”而不是纯字符串。

someFunction() {
    var someString=`<button @click="alert('hi')">blah</button>`;
    return html([someString]);
}
render() {
    return this.someFunction();
}

不起作用，而

someFunction() {
    return html`<button @click="alert('hi')">blah</button>`
}
render() {
    return this.someFunction();
}

有效。

感谢您的帮助!

Answer 1

这是不可能的。这是两个标记模板文字和函数调用根本不同的东西:

标记模板文字

html`<button @click="alert('hi')">blah</button>`

调用 html 作为标记模板函数将调用带有 n 个参数的 html 函数。第一个是模板常量部分的数组，第二个以后的参数将被插值。

普通函数调用

const someString = `<button @click="alert('hi')">blah</button>`;
html([someString]);

将 html 作为函数调用 html([someString]) 将调用该函数，并将数组作为其第一个参数。

作为一种语言功能，浏览器需要从普通函数中理解标记模板。它发生在词汇/语法级别，因此标记函数必须且必须后跟反引号(`)字符。

总之，标记函数 html 不能在没有反引号的情况下存在。您可以在 MDN docs 上阅读更多信息.