代码之家 › 专栏 › 技术社区 › Rishav Sharan

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

es6-modules javascript

Rishav Sharan · 技术社区 · 7 年前

更新: 这里有一个更好的例子; 我的代码是

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>

然而,点击按钮,什么也没有发生;

例如,在这段代码中,我尝试了内联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代码中使用双引号了。

3 回复 | 直到 7 年前

Jordan Enev 7 年前

下面是如何在模板文本中调用函数:

const func = () => 'Hello'

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

Rishav Sharan 7 年前

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

“插入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();

解决了我的问题。

Jeremi G 7 年前

() 当引用它时。这将告诉JavaScript调用函数,并尝试在触发事件时将事件的参数传递给它。

onclick=`${myFunction}`

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前