zoukankan      html  css  js  c++  java
  • thymeleaf学习笔记

    一、Spring Boot中指定静态资源和Thymeleaf模板文件地址时一定要使用路径分隔符结尾(linux:/,windows:\),否则页面加载时访问不到模板文件,如:spring.resources.static-locations: classpath:/static/

    在 javascript 代码中使用 Thymeleaf 模板引擎:

    <script th:inline="javascript">
        $("#content").html(
            "<select name='status'>"+
            "   <option value=''>[[#{admin.common.choose}]]</option>"+
            "   <option value="+[[${status}]]+">[[#{'Order.Status.' + ${value}}]]</option>"+
            "</select>");
    </script>

    script 标签中的 th:inline="javascript" 属性值表示可以使用内联 js ,即可以在 js 代码中使用 [[]] 取值:

     var user = [[${user}]];

    以上是在 Javascript 代码中使用 Thymeleaf 模板引擎的简单示例,但有时也会遇到不可解决或者说很难解决的问题。例如,如果要在 js 代码中输出一个段 html 代码,并且要在 html 代码中作循环操作,而 html 本身并没有提供这种功能的实现,这时要使用 Thymeleaf 的 th:each 属性,但是如何使用 th:each 在 js 中实现? 这时就不能像上面那样的使用字符串拼接内联 js 来实现了,因为 th:xx 是要作为标签的属性放在标签内部的,js 解析不了。解决的方案是将 html 代码放在一个使用 text/html 解析的 script 标签中,这样就会使用 html 的解析方式来解析这些代码,示例如下:

    <script type="text/html" id="thymeleafTable">
        <table>
            <tr>
                <th th:text="#{Order.type}"></th>
                <td>
                    <select name="type">
                        <option value="" th:text="#{admin.common.choose}"></option>
                        <option th:each="value : ${types}" th:value="${value}" th:attr="selected = ${value == type} ? 'selected' : ''" th:text="#{'Order.Type.' + ${value}}"></option>
                    </select>
                </td>
            </tr>
        </table>
    </script>  

    然后在 js 代码中使用脚本的 id 来调用该脚本:

    $("#content").html($("#thymeleafTable").html());  

    text/csstext/html 和 text/javascript 等属性值规定脚本的 MIME 类型,它表示浏览器的解释方式,例如,text/javascript 告诉浏览器按照 Javascript 来解析执行。

  • 相关阅读:
    78. Subsets
    93. Restore IP Addresses
    71. Simplify Path
    82. Remove Duplicates from Sorted List II
    95. Unique Binary Search Trees II
    96. Unique Binary Search Trees
    312. Burst Balloons
    程序员社交平台
    APP Store开发指南
    iOS框架搭建(MVC,自定义TabBar)--微博搭建为例
  • 原文地址:https://www.cnblogs.com/jxrichar/p/7700957.html
Copyright © 2011-2022 走看看