Thymeleaf 中使用js

2019独角兽企业重金招聘Python工程师标准>>>

1.JS代码中没有使用 Thymeleaf 表达式，仅仅是需要把JS 放在 Thymeleaf 内。

比如在头部加入js

只需要加入/*<![CDATA[*/    ......    /*]]>*/代码块，包裹你的JS代码。thymeleaf才能正确解析一些运算符(<等)和操作符号&/&&等。

1）<![CDATA[ 的作用就是把注释的内容当成文本，不解析 。那为什么要写成/*<![CDATA[*/？

a) 首先要知道/*…*/ 的作用

/*…*/中的内容在用浏览器打开静态 网页时，会被忽略.

b）<![CDATA[ 的作用

上面说了，就是把注释的内容当成文本，不解析。（XML 也有）

原因就是：

thymeleaf  中没办法解析js。所以需要加入<![CDATA[ 。 加 /* */  包裹<![CDATA[ 是因为 静态打开时，thymeleaf 没解析 ，直接把内容交给了浏览器 ，浏览器能解析JS.所以这时要让<![CDATA[  失效。正常解析js。

 

2.在javaScript中使用表达式给js变量赋值 转载自

表达式同样可以在javascript中使用。先用属性声明一下：javascript ( th:inline=”javascript” )，然后我们开始在js中声明变量：

<script th:inline="javascript">
/*<![CDATA[*/
    ...
    var username = /*[[${session.user.name}]]*/ 'Sebastian';
    ...
/*]]>*/
</script>

/*[[…]]*/表达式的理解如下：

• /*…*/中的内容在用浏览器打开静态 网页时，会被忽略.
• ‘Sebastian’会在浏览器中显示。静态时。

• Thymeleaf解析时，会解析/*[[…]]*/的内容，并把获得的值替换掉/*[[…]]*/后面的内容。

  所以执行的结果如下：

<script th:inline="javascript">
/*<![CDATA[*/
    ...
    var username = 'John Apricot';
    ...
/*]]>*/
</script>

你也可以不用注释：

<script th:inline="javascript">
/*<![CDATA[*/
    ...
    var username = [[${session.user.name}]];
    ...
/*]]>*/
</script>

这会让它在静态显示时出现错误。 
注意：引擎求值后注入是智能的，它可以智能赋值一下类型的数据。

• Strings
• Numbers
• Booleans
• Arrays
• Collections
• Maps
• Beans (objects with getter and setter methods) 
  举个栗子：

  script th:inline="javascript">
  /*<![CDATA[*/
  ...
  var user = /*[[${session.user}]]*/ null;
  ...
  /*]]>*/
  </script>

  ${session.user}会获取一个user对象。写入后如下：

  <script th:inline="javascript">
  /*<![CDATA[*/
  ...
  var user = {'age':null,'firstName':'John','lastName':'Apricot',
  'name':'John Apricot','nationality':'Antarctica'};
  ...
  /*]]>*/
  </script>

  引擎同样允许增加和删除代码块，增加代码块：(这有啥用，直接写不行吗？谁知道告诉我一下)

  var x = 23;
  /*[+
  var msg = 'This is a working application';
  +]*/
  var f = function() {
  ...

  解析如下：

  var x = 23;
  var msg = 'This is a working application';
  var f = function() {
  ...

  删除代码块：

  var x = 23;
  /*[- */
  var msg = 'This is a non-working template';
  /* -]*/
  var f = function(){
  ...

  解析如下：

  var x = 23;
  var f = function(){
  ...

   

转载于:https://my.oschina.net/zjllovecode/blog/1574015