Как добавить функцию для вызова по нажатию кнопки, которая является частью литерала шаблона? - PullRequest
Новая
       37

Как добавить функцию для вызова по нажатию кнопки, которая является частью литерала шаблона?

0 голосов
/ 06 мая 2019

У меня есть кнопка как часть литерала шаблона. Я хочу вызвать функцию прототипа (с аргументами) по нажатию кнопки. Как мне это сделать?

Я обнаружил, что путем регистрации вызываемой функции, как части окна, это может быть достигнуто. Но я хочу, чтобы была вызвана функция, являющаяся частью прототипа. В приведенном ниже примере необходимо вызвать showFilmDetails, а его подпись должна быть 

FilmCard.prototype.showFilmDetails = function(url){
    alert(url);
}

Пример кода: 

    function FilmCard(data){

    }

    FilmCard.prototype.render = function(data){
        return this.getTemplate(data);
    }

    window.showFilmDetails = function(url){
        alert(url);
    }

    FilmCard.prototype.getTemplate = function(data){
        var self = this;
        return `
            <div class="card">
                <h4><button onclick="showFilmDetails('${data.url}')">${data.title}</button></h4>
                <div>
                    <div>Director: ${data.director}</div>
                    <div>Producer: ${data.producer}</div>
                    <div>Release Date: ${data.release_date}</div>
                </div>
            </div>
        `;
    }

Как я могу вызвать функцию после того, как сделаю ее частью прототипа, и при этом предупреждать об оцененном URL? Я не хочу явно добавлять прослушиватель событий на кнопку.

1 Ответ

0 голосов
/ 07 мая 2019

Разрешил, заключив в парантезе функцию. 

FilmCard.prototype.showFilmDetails = (url) => {
    alert(url);
}

FilmCard.prototype.getTemplate = function(data){
    var self = this;
    return `
        <div class="card">
            <h4><button onclick="(${self.showFilmDetails})('${data.url}')">${data.title}</button></h4>
            <div>
                <div>Director: ${data.director}</div>
                <div>Producer: ${data.producer}</div>
                <div>Release Date: ${data.release_date}</div>
            </div>
        </div>
    `;
}
...