Thymeleaf外部javascript文件与html文件共享模块属性

小编典典

Thymeleaf外部javascript文件与html文件共享模块属性

spring-boot

假设您有一个HTML5模板文件，其中包含一个外部javascript文件。例如：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Reading List</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <link rel="stylesheet" type="text/css" media="all"
        href="/css/style.css" th:href="@{/css/style.css}"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script th:src="@{|/js/selectionCreation.js?v=${#dates.createNow()}|}"></script>

有两个控制器-
html控制器和javascript控制器，html控制器提供用于呈现html模板的模块属性，而javascript控制器假定为javascript提供模块属性。但是，javascript还需要使用html控制器提供的模块属性。如果我将javascript移到了html文件中（嵌入式javascript）；在html文件中，类似于：

<script>
    var showtext = "[[${readingListObject.course.Id}]]";
    console.log(showtext);
</script>

没问题，但是如果我将脚本移到单独的外部javascript文件中，则外部javascript如何访问html控制器提供的模块属性？有没有办法让javascript控制器与html控制器交换模块属性？我使用Spring
Boot 1.5.10，Thymeleaf 3.0.9。

阅读 773

2020-05-30

共1个答案

小编典典

您可以使用<script></script>外部js文件中的标记（内联）内部声明的变量。只是在您的html中引用外部js文件

<script>
var showtext = "[[${readingListObject.course.Id}]]";
</script>

然后，您可以在外部脚本中访问showtext变量。因此，您可以在html内使用内联js仅传递属性，然后可以在外部js中使用变量进行逻辑处理。

更新：-

    <script>
        //Your in line code here, declare var and assign your   model   attribute
 </script>

然后，在此行下方，将您的链接指向您的外部JS文件。

<script th:src="source to your external JS">
</script>

2020-05-30