Question

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

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

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

如何添加称为模板文字的按钮的onclick函数？

1 个答案: