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

【问题标题】：How to add function to be called onclick of button which is a part of template literal?如何添加作为模板文字一部分的按钮的 onclick 函数？
【发布时间】：2019-09-24 08:44:44
【问题描述】：

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

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

【问题讨论】：

目前发生了什么？对我来说，这似乎应该有效。它是否抛出错误，它说什么？
您可以在这里使用事件委托吗，您不需要分配 onclick。将数据存储在data-url="${data.url}"
“按钮”不是模板文字的一部分。似乎按钮的 html 标记是字符串的一部分。您不应该这样做，而是使用 DOM 安装事件处理程序。
@ChrisBarr 目前可以正常工作，但是如果我将 showFilmDetails 更新为原型的一部分，则会引发错误
@Bibberty 现在，我已经添加了 url。以后的功能可能会非常复杂。我需要传递函数。

标签： javascript events ecmascript-6 template-literals

【解决方案1】：

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

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

【讨论】：