Reference herein thymeleaf documentation Chinese version
Inline script (JavaScript inlining)
Inline script for HTMLthe JavaScript Template mode of <script>providing better integration block.
And as inline text
This mode requires th:inline="javascript"an explicit open, i.e., must be added in the <script> </ scipt> tag:
1 <script th:inline="javascript"> 2 ... 3 4 ... 5 </script>
1, double brackets [[]] text required for output, the result will be quoted for JS and enclose text in its escaped
1 <script th:inline="javascript"> 2 ... 3 var username = [[${session.user.name}]]; 4 ... 5 </script>
Output:
1 <script th:inline="javascript"> 2 ... 3 var username = "诸葛\"孔明\""; 4 ... 5 </script>
First of all , not only the inline script will output the desired text, but also the use of quotation marks to enclose it up and carried JS escape its content, so the result of the expression will be output as a properly formatted text JS
Example: the user in the input box> Today is really a "good" weather, so stored in the database, and then taken out when placed js because this can escape into a string sentence: "It's a \ Today" good \ " the weather"
2, brackets parentheses [()] output the desired text, the contents will not escape the string, the string is not in the two quotes
<script th:inline="javascript"> ... var arr = [(${session.user.name})]; ... </script>
Output:
<TH Script: inline = "JavaScript"> ... var ARR = Zhuge Liang ; ... </ Script>
Ends without quotation marks, js being given, which can be used directly pass over the background objects or the like into a transposed array json string, of course, this is just an example, if you want to use an array or an object, followed by a better method
3, multi-line comment / * * / output text, Thymeleaf ignore everything after the comment content and before the semicolon, which can be seen as replacing the contents of the back with the contents of the notes (personal most recommended wording)
. 1 <TH Script: inline = "JavaScript"> 2 ... . 3 var username = / * [[$ {session.user.name}]] * / "user name" ; . 4 ... . 5 </ Script>
Output:
1 <script th:inline="javascript"> 2 ... 3 var username = "诸葛孔明"; 4 ... 5 </script>
Here thymeleaf when rendering directly to the contents of the annotation to the annotation from the end of the sentence, i.e., replacing all the contents to be taken out into the semicolon before the text
Personally recommend such an approach, because of this, html which can open as a static file, it can be resolved after the data is inserted by the background
For example: the front pages written Jump to:
url: "./user_edit.html";
And we replaced our back page to obtain the absolute path, it will write a perfect run when you open a static template file (not performed by the server), which does not directly affect the browser opens the page jump, does not affect the background thymeleaf analytical use
url: /* [[@{/userEdit/getPage}]] */ "./user_edit.html" ;
Advanced computing and inline JavaScript serialization
Expression of intelligent computing is not limited to the string. Thymeleaf following types of objects will correct output JavaScript syntax:
- Strings
- Numbers
- Booleans
- Arrays
- Collections
- Maps
- Beans (must have getter and setter methods)
1 <script th:inline="javascript"> 2 ... 3 var user = /*[[${session.user}]]*/ null; 4 ... 5 </script>
${session.user}Identified as a Usertarget, then the correct Thymeleaf will be converted to Javascript syntax, output:
1 <script th:inline="javascript"> 2 ... 3 var user = {"age":null,"firstName":"John","lastName":"Apricot", 4 "name":"John Apricot","nationality":"Antarctica"}; 5 ... 6 </script>
JavaScript is serialized by implementing org.thymeleaf.standard.serializer.IStandardJavaScriptSerializerthe interface is completed, the engine can be used in the template StandardDialectconfiguration example.
JS serialization default implementation is classpathunder looking for Jackson库, if the library exists, calling its methods. If there is no built-in method is called serialization. This method covers the needs of most of the scene, and provides similar results (but less flexible).