Thymeleaf布局:javascript

问题描述 投票:1回答:3

我有一个百里香模板,看起来像:

<body>

<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <!-- Menu -->
     <div th:replace="laberint/common/menu :: [//div[@id='menu']]"></div>

菜单看起来像:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <!-- Menu -->
    <div id="menu" oncontextmenu='return false' ondragstart='return false' onmousedown='return false'>
     ......

     <script th:inline="javascript">
     alert ('lalala');
     </script>



    </html>

但是当我加载页面时,我没有看到警报

javascript html css html5 thymeleaf
3个回答
2
投票

Thymeleaf documentation建议使用弹出div而不是JavaScript警报:

这是使用layout:fragment(task / alert.html)的可重用警报片段的示例:

<!DOCTYPE html>
<html>
  <body>
    <th:block layout:fragment="alert-content">
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</p>
        <p>
            <button type="button" class="btn btn-danger">Take this action</button>
            <button type="button" class="btn btn-default">Or do this</button>
        </p>
    </th:block>
  </body>
</html>

调用上面的片段可能如下(task / list.html):

<div layout:insert="~{task/alert :: alert}" th:with="type='info', header='Info'" th:remove="tag">
    <!--/* Implements alert content fragment with simple content */-->
    <th:block layout:fragment="alert-content">
        <p><em>This is a simple list of tasks!</em></p>
    </th:block>
</div>

要么:

<div layout:insert="~{task/alert :: alert}" th:with="type='danger', header='Oh snap! You got an error!'" th:remove="tag">
    <!--/* Implements alert content fragment with full-blown HTML content */-->
    <th:block layout:fragment="alert-content">
       <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</p>
        <p>
            <button type="button" class="btn btn-danger">
            Take this action</button>
            <button type="button" class="btn btn-default">
            Or do this</button>
        </p>
    </th:block>
</div> 

在这种情况下,任务/警报(/WEB-INF/views/task/alert.html)模板的整个警报内容将被上面的自定义HTML替换。

因此,OP中的示例可能如下所示:

<div layout:insert="~{task/alert :: alert}" th:with="type='info', header='lalala'" th:remove="tag">
        <th:block layout:fragment="alert-content">
            <p>La la la</p>
        </th:block>
    </div>

0
投票
 <script type="text/javascript" th:inline="javascript">

用上面的代码替换你的脚本标签,工作正常


0
投票

把它放在div里面后它可以工作

 <script th:inline="javascript">
     alert ('lalala');
     </script>
 </div>
    </html>
© www.soinside.com 2019 - 2024. All rights reserved.