时间戳

首页 > 解决方案 > 如何添加作为模板文字一部分的按钮的 onclick 函数？

javascript - 如何添加作为模板文字一部分的按钮的 onclick 函数？

问题描述

我有一个按钮作为模板文字的一部分。我想在单击按钮时调用原型函数（带参数）。我怎么做？

我发现通过将要调用的函数注册为窗口的一部分，可以实现这一点。但我希望调用作为原型一部分的函数。在下面的示例中，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？我不想在按钮上显式添加事件侦听器。

标签： javascripteventsecmascript-6template-literals

解决方案

通过将函数括在括号中来解决它。

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>
    `;
}

推荐阅读