问题描述
刚刚使用 Symfony 4.4 和 Webpack Encore 开始一个新项目:
刺激来了!我从来没有用过这个,看起来它对我不起作用。我的代码有问题吗?
我只是有一个渲染 base.html.twig
的 Symfony 控制器,这个文件包含这个:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="stylesheet" href="{{ asset('build/app.css') }}">
<script src="{{ asset('build/app.js') }}"></script>
{% block javascripts %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
<button data-action="click->hello#greet">Greet</button>
</body>
</html>
并且 hello_controller.js
包含以下内容:
import { Controller } from 'stimulus'
export default class extends Controller {
greet () {
console.log('Hello,Stimulus!',this.element)
}
connect () {
this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js'
}
}
在浏览器中,当我检查代码时,捆绑的 javascript 代码很好地“呈现”,但当我单击“问候”按钮时什么也没有发生。
解决方法
经过一些调查,必须使用 Twig 中的特殊函数插入 Encore 链接。
其实我们应该这样做:
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
代替
<link rel="stylesheet" href="{{ asset('build/app.css') }}">
<script src="{{ asset('build/app.js') }}"></script>