如何使用 ES6 模板文字进行函数调用

Question

更新：这是一个更好的例子；我的代码是

let myFunction = () => {

    console.log('Yo');
    alert('Yo');

}

let About = {

    render : async () => {

        return /*html*/`
        <h1> About </h1>
        <button id="myBtn" type="button" >Try it</button> 

        <script>
            document.getElementById("myBtn").addEventListener ("click",  ${myFunction})
        </script>
    `
    }
}

export default About;

这将转换为 HTML 代码；

<div id="page_container" class="container pageEntry">
        <h1> About </h1>
        <button id="myBtn" type="button">Try it</button> 

        <script>
            document.getElementById("myBtn").addEventListener ("click",  () => {

    console.log('Yo');
    alert('Yo');

})
        </script>
    </div>

然而，点击按钮，什么也没有发生；

---

我正在尝试使用基本的 vanilla js SPA，但遇到了一个问题，即我无法从 html 代码调用当前模块中的任何函数。我通过在我的 index.html 中指定 script 标签的 type="module" 来使用 es6 模块。

例如，在此代码中，我尝试了内联 onclick 标记属性以及添加事件侦听器（我一次使用一个，而不是一起使用。在此处显示仅用于说明）

let myFunction = () => {
    console.log('Yo');
    alert('Yo');
}

let About = {

    render : async () => {

        return /*html*/`
        <h1> About </h1>
        <button id="myBtn" type="button" onclick="${myFunction}">Try it</button> 

        <script>
        document.getElementById("myBtn").addEventListener ("click",  myFunction()})
        </script>
    `
    }
}

export default About;

我将结果视图消耗为

content.innerHTML = await page.render();

从我的主模块。

我能够做到这一点的唯一方法是让我的函数调用返回另一个包含实际 JS 代码的模板。

let myFunction = () => {
    return `
        alert('Yo');
        document.getElementById('myBtn').textContent = 'Duh'
        `
}

然而，这会创建一个非常丑陋的页面，其中我的整个 JS 代码都被内联添加到 HTML 中，并且我不能再在我的 js 代码中使用双引号。

Answer 1

以下是在模板文字中调用函数的方法：

const func = () => 'Hello'

console.log(`${func()} World`)

Answer 2

在另一个论坛的帮助下解决了我的问题。

“插入innerHTML 的脚本不会运行。您应该尝试将渲染函数拆分为render 和onMount - 第二个函数在innerHTML 行之后调用。”

将我的应用程序构建为；

let About = {
    render : async () => {
        let view =  /*html*/
            `
            <h1> About </h1>
            <button id="myBtn" type="button" >Try it</button> 
            `
        return view
    },
    after_render: async () => {
        document.getElementById("myBtn").addEventListener ("click",  () => {
            console.log('Yo')
            alert('Yo')
        })
    }

}

export default About;

并将其消费为；

content.innerHTML = await page.render();
await page.after_render();

解决了我的问题。