Как сделать вызов функции с литералами шаблона ES6 - PullRequest
Новая
       8

Как сделать вызов функции с литералами шаблона ES6

0 голосов
/ 09 октября 2018

ОБНОВЛЕНИЕ: вот лучший пример;Мой код 

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-кода.Я использую модули es6, указав в моем index.html, что скрипт-тег имеет тип = "module".

Например, в этом коде я попробовал как встроенный атрибут тега 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 ]

0 голосов
/ 09 октября 2018

Вы можете дать onClick ссылку на свою функцию, не указав () при ссылке на нее.Это сообщит JavaScript, чтобы он вызывал функцию и пытался передать ей аргументы события при его срабатывании. 

onclick=`${myFunction}`

будет вызываться при каждом нажатии элемента.

0 голосов
/ 10 октября 2018

Выяснил мою проблему с помощью другого форума.

"Скрипты, вставленные в innerHTML, не запускаются. Вы должны попробовать разделить функцию рендеринга на render и onMount - вторую, вызываемую сразу после innerHTML.line. "

Создание моего приложения в; 

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();

решило мои проблемы.

0 голосов
/ 09 октября 2018

Вот как вы можете вызвать функцию в литерале шаблона: 

const func = () => 'Hello'

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