将OnClick属性与Webpack Encore封装的功能链接 第一次尝试第二次尝试

问题描述

简介

你好

（此介绍不是问题的一部分，但可以提供一些背景信息。但是您可以忽略它）

我创建了一个新主题，因为它与此one并不完全相关。

由于this无法正常工作，即使在尝试了所有考虑到的内容后，我还是决定从争吵中退出。

提供有关我的目标的详细信息

我想做的是每次单击html元素时调用javascript函数。 很简单。

这是我的树枝模板的样子

# templates/menu/index.html.twig
{% extends '_base.html.twig' %}

{% block title %}HANFF - Menu{% endblock %}

{% block body %}
    <div>
        {% trans %} Bonjour,bienvenue{% endtrans %} <span id="user_login">{{ app.user.login }}</span>
    </div>

    <a class="icons" href="#">
        <i class="far fa-star" aria-hidden="true" onclick="testAlert('{{ app.user.login|e('js') }}')"></i>
    </a>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('menu') }}
{% endblock %}

我希望当我点击 .fa-star 元素时，弹出窗口显示“ Hello mr”和用户名。

我尝试过的事情

第一次尝试

我将 testAlert 函数写入 menu.js ：

#assets/js/menu.js

function testAlert(userName){
    alert('Hello mr ' + userName);
}

module.exports = {
    testAlert
}

我已经将entryPoint添加到webpack.config.js中并重新运行yarn watch。

但是这不起作用，因为testAlert不是全局的，但据我所知封装在 menu.js 中。

我收到此错误：

第二次尝试

我编辑 menu.js 并编写以下代码

# assets/js/menu.js

function testAlert(userName){
    alert('Hello mr ' + userName);
}

window.testA = testAlert;

yarn watch仍在运行...

我刷新页面并对其进行测试。

有效！

但是我不太喜欢它，因为使用window JavaScript对象使函数成为全局函数。 这就是webpack的全部对立，其中不再存在全局变量。
我不知道这样做是不是一个好习惯。
所以我对于实现目标应该怎么做感到困惑...

任何帮助都是有意义的。

解决方法

这样做的方法是在一些 DOM 元素上添加监听器，就像：

<a class="icons" data-user="{{app.user.login}}" href="#">
        <i class="far fa-star" aria-hidden="true"></i>
</a>

然后js代码就是

$(document).ready(
    function () {
        $('a.icons').on(
           'click',function (e) {
               var $a = $(this);
               alert('Hello Mr : ' + $a.data('user'));
            }
        );
    }
);