Link webpack encore封装功能的OnClick属性

Question

简介

你好，

（这个介绍不是问题的一部分，但可以提供一点上下文。但是你可以忽略它）

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

由于不起作用，即使尝试了所有想到的方法，我还是决定从零开始。

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

我想做的是每次单击 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
}

我已经将入口点添加到 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 的所有对立面，其中全局变量不再存在。
我不知道这样做是否是个好习惯。
所以我有点困惑我应该做什么来实现我的目标...

任何帮助都是可观的。

Answer 1

方法是在某些 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'));
            }
        );
    }
);

Link webpack encore封装功能的OnClick属性

Link OnClick attribute with function encapsulated by webpack encore

jquery

webpack-encore

简介

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

我试过的

第一次尝试

第二次尝试