thymeleaf - 脚本和 th:block [英] thymeleaf - script and th:block

问题描述

)有没有办法在script"标签中使用th:block"标签?类似的东西:

) Is there any way to use "th:block" tag inside "script" tag? something like that:

<script type="text/javascript">
    <th:block>
        var test = 1;
    </th:block>
</script>

推荐答案

我们有要求插入一个外部 javascript(里面有 thymleaf 变量)并将其包装在 cdata 中，它基于@Pau 的解决方案:

We had the requirements to insert an external javascript (with thymleaf variables inside) and wrap it in cdata, it's based on @Pau's solution:

<script th:inline="javascript">
  /*<![CDATA[*/
  /*[+ [# th:insert="~{path/to/file.js}" /] +]*/
  /*]]>*/
</script>

在这五行中我们打包了:

In these five lines we packed:

• Javascript 内联，触发 thymeleaf 对内容的解析 (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining)
• 多行注释 CDATA 表示法，因此没有换行的最小化代码不会仅被解析为注释 (https://en.wikipedia.org/wiki/CDATA#Use_of_CDATA_in_program_output)
• 纯文本原型注释块添加代码，防止渲染静态文件中的内容，防止IDE被无效代码混淆.(https:///www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#textual-prototype-only-comment-blocks-adding-code)
• 自然的 javascript 模板，为了在 javascript 中使用 thymeleaf，我们使用了空标签方法，我们在这里省略了 th:block，因为它是默认的 (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#natural-javascript-and-css-模板)
• 使用 th:insert 插入片段以插入包含 thymeleaf 变量的转译/缩小的外部 javascript.您也可以使用 th:text 或 th:utext，但是这些会在不解析的情况下插入外部 javascript 的内容，因此在我们的情况下，变量不会被解析.(https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html)
• 最后是片段特定的语法，通过模板路径包含一个模板(https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#fragment-specification-syntax)

• Javascript inlining, to trigger thymeleaf parsing of the content (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining)
• Multiline comment CDATA notation, so that minimized code without linewraps will not be parsed as a comment only (https://en.wikipedia.org/wiki/CDATA#Use_of_CDATA_in_program_output)
• Textual prototype-only comment blocks adding code, to prevent rendering the content in static files and prevent the IDE from being confused by invalid code. (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#textual-prototype-only-comment-blocks-adding-code)
• Natural javascript templates, to use thymeleaf inside javascript, we used the empty tag approach and we omit th:block here, because it is the default (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#natural-javascript-and-css-templates)
• Inserting of fragments with th:insert to insert a transpiled/minified external javascript with thymeleaf variables included. You can use th:text or th:utext too, but these insert the content of the external javascript without parsing it, so in our case the variables wouldn't have been resolved. (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html)
• Finally the fragment specific syntax, to include a template via template path (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#fragment-specification-syntax)

这篇关于thymeleaf - 脚本和 th:block的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！