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中指定脚本标记的类型为“模块”来使用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

您可以通过在引用时不提供()来为onClick提供对功能的引用。这将告诉JavaScript调用该函数，并在触发事件时尝试将事件的参数传递给它。

onclick=`${myFunction}`

每次单击该元素都会调用

。

Answer 3

在另一个论坛的帮助下找出了我的问题。

“插入innerHTML的脚本无法运行。您应该尝试将render函数拆分为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();

解决了我的问题。

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

3 个答案: