Thymeleaf外部javascript文件與html文件共享模塊屬性

Question

假設您有一個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。

Answer 1

您可以使用在外部js文件的<script></script>標記（內聯）中聲明的變量。 只是在您的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>

Thymeleaf外部javascript文件與html文件共享模塊屬性

問題描述

1 個解決方案

解決方案1
2 已采納 2018-03-22 15:29:34

Thymeleaf外部javascript文件與html文件共享模塊屬性

問題描述

1 個解決方案

解決方案1 2 已采納 2018-03-22 15:29:34

解決方案1
2 已采納 2018-03-22 15:29:34