Thymeleaf高级用法：内联文本与脚本交互

"Thymeleaf模板引擎的高级用法教程，包括内联文本和脚本内联的使用方法。" 在Thymeleaf模板引擎的学习中，除了基础的语法之外，还有一些高级用法可以提高开发效率和代码的简洁性。在第2-4课中，我们将深入探讨Thymeleaf的内联文本和脚本内联功能。 内联文本是Thymeleaf提供的一种简化访问model对象数据的方式，特别是在不希望使用`th:`标签的情况下。通过设置`th:inline`属性，我们可以将文本内容与表达式直接结合。例如，在HTML代码中，可以使用`th:inline="text"`来激活内联文本模式。这样，我们就可以在`[[${expression}]]`中直接插入变量或表达式，如`[[${userName}]]`。对比传统的`th:text`，内联文本使得代码更简洁，但可能不利于在原型设计中预览。 下面是一个内联文本的例子： ```html <div> <h1>内联</h1> <div th:inline="text"> <p>Hello,[[${userName}]]!</p> <br/> </div> </div> ``` 这与使用`th:text`的代码相比，显得更加紧凑： ```html <div> <h1>不使用内联</h1> <p th:text="'Hello,'+${userName}+'!'"></p> <br/> </div> ``` 接下来，我们来看一下如何在JavaScript代码块中使用后端传递的值，这称为脚本内联。通过设置`th:inline="javascript"`，我们能够在JavaScript脚本中直接引用Thymeleaf表达式的值。以下是一个示例： ```html <script th:inline="javascript"> var name=[[${userName}]]+',Sebastian'; alert(name); </script> ``` 在上述代码中，`[[${userName}]]`会被替换为后端提供的`userName`属性值，然后与"Sebastian"拼接成一个字符串，最后通过`alert`弹出窗口显示。 为了实现这个功能，后端控制器需要向视图传递数据，例如使用Spring MVC的`ModelMap`： ```java @RequestMapping("/inline") public String inline(ModelMap map) { map.addAttribute("userName", "neo"); return "inline"; } ``` 当项目运行并在浏览器中输入`http://localhost:8080/inline`时，页面将会展示内联文本和脚本内联的效果，即根据后端传入的用户名"neo"显示相应的弹窗提示。 Thymeleaf的内联文本和脚本内联特性提供了更高效和便捷的方式来处理动态内容。通过这些高级用法，开发者可以更好地融合模板语言和前端脚本，使得模板渲染更加灵活且易于维护。