thymeleaf使⽤inline获取js中的值_Thymeleaf参考⼿册（⼗
⼆）：内联
表达式内联
尽管标准⽅⾔允许我们使⽤标记属性来执⾏⼏乎所有操作，但是在某些情况下，我们更喜欢直接将表达式写到HTML⽂本中。例如，我们可能更喜欢这样编写：
<p>Hello, [[${session.user.name}]]!</p>
以代替：
<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>
在Thymeleaf中，[[...]]
th:textor th:utext
th:utext 属性中也有效[[...]] 或之间的表达式 [(...)]
[(...)] 被认为是内联表达式，在它们内部，我们可以使⽤在 th:textor
的任何类型的表达式。
[(...)] 对应于 th:utext
th:utext 并且将不执⾏任何HTML转义。因此 msg =
msg = th:text（即结果将被HTML转义），但 [(...)]
请注意，尽管 [[...]]
[[...]] 对应于 th:text
'This is <b>great!</b>'，给定该⽚段，使⽤诸如的变量：
'This is <b>great!</b>'
<p>The message is "[(${msg})]"</p>
<b> 标签未转义，因此：
结果将使那些 <b>
<p>The message is "This is <b>great!</b>"</p>
如果需要转义：
<p>The message is "[[${msg}]]"</p>
结果将转义为HTML：
<p>The message is "This is <b>great!</b>"</p>
）
中处于活动状态，因此我们⽆需执⾏任何操作即可启⽤它。
⽂本内联在每个标记主体（⽽不是标签本⾝）中处于活动状态
默认情况下，⽂本内联
请注意，默认情况下
内联与原始模板
th:text 属性更少的代码如果以这种⽅式输出⽂本为标准的其他模板引擎，您可能会问：我们为什么不从⼀开始就这样做？⽐所有诸如这些th:text
！
好吧，要⼩⼼，因为尽管您可能会发现内联⾮常有趣，但是您应该始终记住，当静态打开内联表达式时，它们会逐字显⽰在HTML⽂件中，因此您可能⽆法将它们⽤作原型设计！
浏览器不使⽤内联静态显⽰代码⽚段的⽅式之间的区别...
Hello, Sebastian!
如何使⽤？
Hello, [[${session.user.name}]]!
看，多⽅便实⽤！
禁⽤内联
[[...]] 或者 [(...)]
[(...)] 序列⽽不将其内容作为表达式处理。为此，我们不过，可以禁⽤此机制，因为实际上在某些情况下，我们确实希望输出 [[...]]
th:inline="none"：
将使⽤ th:inline="none"
<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>
这将导致：
<p>A double array looks like this: [[1, 2, 3], [4, 5]]!</p>
⽂字内联
th:inline="text"。
⽂本内联与我们刚刚看到的表达式内联功能⾮常相似，但实际上增加了更多功能。必须使⽤明确启⽤它th:inline="text"
⽂本内联不仅使我们能够使⽤与刚才看到的相同的内联表达式，⽽且实际上就像在模板模式下处理标签主体⼀样处理标签主体TEXT，这使我们能够执⾏基于⽂本的模板逻辑（不仅是输出表达式）。
关于⽂本模板模式的内容，在后续章节中将会详细介绍。
JavaScript内联
<script> 在以 HTML
HTML 模板⽅式处理的模板中更好地集成JavaScript 块。
JavaScript内联允许 <script>
JAVASCRIPT 模板模式下的模板来处理。
与⽂本内联⼀样，这实际上等同于将脚本内容当作 JAVASCRIPT
th:inline="javascript" 以下命令显式启⽤此模式：
⾸先必须先使⽤ th:inline="javascript"
<script th:inline="javascript">
...
var username = [[${session.user.name}]];
...
</script>thymeleaf用法
这将导致：
var username = "Sebastian "Fruity" Applejuice";
...
</script>
上⾯的代码中有两点需要注意：
⾸先，JavaScript内联不仅会输出所需的⽂本，⽽且还会⽤引号将其括起来，并对其内容进⾏JavaScript转义，以便将表达式结果输出
为良好格式的JavaScript⽂字
良好格式的JavaScript⽂字。
${session.user.name} 表达式输出为转义的，即使⽤双括号表达
其次，发⽣这种情况是因为我们将 ${session.user.name}
[[${session.user.name}]]。如果相反，我们使⽤未转义的形式：
式：[[${session.user.name}]]
<script th:inline="javascript">
...
var username = [(${session.user.name})];
...
</script>
结果如下所⽰：
<script th:inline="javascript">
...
var username = Sebastian "Fruity" Applejuice;
...
</script>
这是错误格式的JavaScript代码。但是，如果我们通过附加内联表达式来构建脚本的某些部分，则可能需要输出未转义的内容，因此有此⼯具是件好事。
JavaScript⾃然模板
所提到的JavaScript内联机制的智能远不⽌于应⽤特定于JavaScript的转义并将表达式结果输出为有效⽂字。
例如，我们可以将（转义的）内联表达式包装在JavaScript注释中，例如：
<script th:inline="javascript">
...
var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
...
</script>
'Gertrud Kiwifruit'），因此执⾏此操作的结果将与未使⽤包装注释⽽且Thymeleaf将忽略注释之后和分号之前的所有内容（在本例中为 'Gertrud Kiwifruit'
时的情况完全相同：
<script th:inline="javascript">
...
var username = "Sebastian "Fruity" Applejuice";
...
</script>
但是，请仔细查看原始模板代码：
var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
...
</script>
有效的JavaScript代码。当您以静态⽅式打开模板⽂件（⽆需在服务器上执⾏）时，它将完美执⾏。
注意这是有效的JavaScript
JavaScript⾃然模板的⽅法！
因此，这⾥提供的是⼀种制作JavaScript⾃然模板的⽅法
⾼级内联评估和JavaScript序列化
关于JavaScript内联的重要注意事项是，此表达式求值是智能的，并且不仅限于字符串。Thymeleaf将使⽤JavaScript语法正确编写以下类型的对象：
Strings
Numbers
Booleans
Arrays
Collections
Maps
Beans (objects with getter and setter methods)
例如，如果我们有以下代码：
<script th:inline="javascript">
...
var user = /*[[${session.user}]]*/ null;
...
</script>
${session.user}
User 对象，Thymeleaf会将其正确转换为Javascript语法：
${session.user} 表达式将求值为 User
<script th:inline="javascript">
...
var user = {"age":null,"firstName":"John","lastName":"Apricot",
"name":"John Apricot","nationality":"Antarctica"};
...
</script>
完成该JavaScript序列化的⽅式是通过 org.thymeleaf.standard.serializer.IStandardJavaScriptSerializer
org.thymeleaf.standard.serializer.IStandardJavaScriptSerializer 接⼝的实现，该接StandardDialect 在模板引擎使⽤的实例中进⾏配置。
⼝可以 StandardDialect
该JS序列化机制的默认实现将在类路径中查Jackson库，如果有的话，将使⽤它。如果没有，它将应⽤内置的序列化机制，该机制可以满⾜⼤多数⽅案的需求并产⽣相似的结果（但灵活性较差）。
CSS内联
<style> 标签中使⽤内联，例如：
Thymeleaf还允许在CSS <style>
<style th:inline="css">
...
</style>
String 值：
例如，假设我们将两个变量设置为两个不同的 String
classname = 'main elems'
align = 'center'
我们可以像这样使⽤它们：
<style th:inline="css">
.[[${classname}]] {
text-align: [[${align}]];
}
</style>
结果为：
<style th:inline="css">
.main elems {
text-align: center;
}
</style>
[[${classname}]] 将作为请注意，CSS内联也像JavaScript⼀样具有⼀定的智能。具体来说，通过转义的表达式（例如）输出的表达式[[${classname}]]
main elems上⾯的代码⽚段。
CSS标识符转义。这就是为什么我们 classname = 'main elems'
classname = 'main elems' 变成了 main elems
进阶功能：CSS⾃然模板
<style> 标签静态和动态地⼯作，即通过将内联表达式包装在注释中⽽成
与之前解释JavaScript的⽅式相同，CSS内联还允许我们的 <style>
CSS⾃然模板。例如：
为CSS⾃然模板
<style th:inline="css">
.main elems {
text-align: /*[[${align}]]*/ left;
}
</style>
我是银河架构师，⼗年饮冰，难凉热⾎，愿历尽千帆，归来仍是少年！
如果⽂章对您有帮助，请举起您的⼩⼿，轻轻【三连】，这将是笔者持续创作的动⼒源泉。当然，如果⽂章有错误，或者您有任何的意见或建议，请留⾔。感谢您的阅读！
⽂章不定时更新，可搜索「银河架构师」，精彩内容，先睹为快！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。