zoukankan      html  css  js  c++  java
  • Thymeleaf 与 Javascript

     

    在 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());  
  • 相关阅读:
    比较全的屏幕信息
    使用div实现progress进度条
    选项卡效果的菜单栏
    javascript写的轮播图
    centos6.5 命令行配置无线上网
    CentOS 6.5 BCM43142 80211无线网卡驱动安装
    [数据库] windows server 2003下mysql出现10048错误的解决办法 Can't connect to MySQL server on '127.0.0.1' (10048)
    桥接模式-多台虚拟机配置(重要)
    VMware虚拟机中如何配置静态IP
    MySQL5.7 mysql.user创建用户
  • 原文地址:https://www.cnblogs.com/afei1013/p/13544327.html
Copyright © 2011-2022 走看看