Javascript 未加载到内部 thymeleaf 链接

Question

当我打开一个新表单时，所有js都可以工作，编辑后它无法加载所有内部js。请在所有数据和路由都已正确连接的假设下工作。

我有一个打开包含现有对象的表单的链接:

<a th:if="${foo.typeName} == a" href="Edit"
       th:href="@{/aFoo/{id}(id=${foo.id})}">view</a>

Controller 方法:

新对象:

@RequestMapping(value="/aFoo", method=RequestMethod.GET)
    public String newAFooForm(Model model) {
        FooViewModel fooViewModel = new FooViewModel(Type.A);
        model.addAttribute("fooViewModel", fooViewModel);
        return "fooForm";
    }

加载现有对象:

@RequestMapping(value="/aFoo/{id}", method=RequestMethod.GET)
    public String editAFooForm(@PathVariable("id") Long id, Model model) {
        FooViewModel fooViewModel = assignFooViewModel(id);
        model.addAttribute("fooViewModel", fooViewModel);
        return "fooForm";
    }

html/th 代码的形式应该不重要，但要描述我的 js 引用:

layout.html 是两种表单的容器。它有 js 导入:

<script th:src="@{js/jquery-1.11.3.min.js}"></script>
<script th:src="@{js/bootstrap.min.js}"></script>
<script th:src="@{js/parsley.min.js}"></script>

以及包含页面上的 js 模板:

<div layout:fragment="script"></div>

fooForm.html 有额外的 js 导入，然后是大量的 js 代码，它开始:

<div layout:fragment="script">
    <script th:src="@{js/typeahead.bundle.min.js}"></script>
    <script th:src="@{js/handlebars.js}"></script>
    <script>
    ....
    </script>
</div>

我的第一个想法是我以某种方式编写了错误的链接，因此它丢失了引用的 js 的上下文。有什么想法吗？谢谢。

Answer 1

js 导入应采用以下格式:

<script href="/js/handlebars.js" th:src="@{/js/handlebars.js}"></script>