[关闭]
@Wangww0925 2020-07-08T07:04:25.000000Z 字数 14956 阅读 749

JsRender 模板

模板引擎 jsRender/jsViews

使用模板，可以预先自定义一些固定格式的HTML标签，在需要显示数据时，再传入真实数据组装并展示在Web页中；避免了在JS中通过“+”等手动分割、连接字符串的复杂过程；针对高性能和纯字符串渲染进行了优化；无需依赖DOM和jQuery

官网： https://www.jsviews.com/#assigntag
jsrender.min.js 下载： https://www.jsviews.com/#download

JsRender使用场景

1、元素重复出现
2、动态加载数据

JsRender注意事项

JsRender对语法要求非常严格，比如for，if前面不能有空格

使用

1、定义模板： <script type="text/x-jsrender" id="Tem"></script>
2、引入js
3、数据：要json对象
4、编译成元素：document.getElementById("XXX").render(data); 或 $("#XXX").render(data); 或$.templates("#XXX").render(data)
5、添加到容器中：使用html、append、before、after等添加

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <p>{{:msg}}</p>
  13.     </script>
  15.     <!-- 2、引入js -->
  16.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  17.     <script src="jsrender.min.js"></script>
  18. </body>
  19. </html>
  21. <script>
  22.     // 3、数据
  23.     var data = {
  24.         msg:"今天天气真好"
  25.     }
  27.     // 4、编译成元素
  28.     var html = $("#Tem").render(data)
  29.     // 或
  30.     // var html = $.templates("#Tem").render(data)
  32.     // 5、添加到容器中
  33.     $("#content").html(html)
  34. </script>

使用 效果：
使用

注释 {{!--}} ... {{--}} 或 {{!-- ... --}}

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <p>{{:msg}}</p>
  13.         {{!--}}
  14.             <p>我是被注释掉的内容</p>
  15.         {{--}}
  16.         <p>啦啦啦 {{!-- 我是被注释掉的内容 --}} 啦啦</p>
  17.     </script>
  19.     <!-- 2、引入js -->
  20.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  21.     <script src="jsrender.min.js"></script>
  22. </body>
  23. </html>
  25. <script>
  26.     // 3、数据
  27.     var data = {
  28.         msg:"今天天气真好"
  29.     }
  31.     // 4、编译成元素并添加到容器中
  32.     $("#content").html($("#Tem").render(data))
  33. </script>

注释 效果：
注释.png-1.3kB

赋值

使用：
文本赋值： {{:属性名}}，类似 text()
原样输出： {{>属性名}}，类似 html()

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <p>{{:msg}}</p>
  13.         <p>{{:love}}</p>
  14.         <p>{{>love}}</p>  <!-- 原样输出 -->
  15.         <p>{{:info.name}}</p>
  16.     </script>
  18.     <!-- 2、引入js -->
  19.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  20.     <script src="jsrender.min.js"></script>
  21. </body>
  22. </html>
  24. <script>
  25.     // 3、数据
  26.     var data = {
  27.         msg:"你好",
  28.         love:'<span style="color:red">花草</span>',
  29.         info:{
  30.             name:"www",
  31.             age:"18"
  32.         }
  33.     }
  35.     // 4、编译成元素并添加到容器中
  36.     $("#content").html($("#Tem").render(data))
  37. </script>

赋值 效果：
变量.png-3.4kB

判断 {{if 表达式}} … {{else}} … {{/if}}

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         {{if info.name == "www"}}
  13.             <p>年龄： {{:info.age}}</p>
  14.             <hr>
  15.         {{/if}}
  18.         {{if type == "1"}}
  19.             <p>消息： {{:msg}}</p>
  20.         {{else type == "2"}}
  21.             <p>名称： {{:info.name}}</p>
  22.         {{else}}
  23.             <p>年龄： {{:info.age}}</p>
  24.         {{/if}}
  25.     </script>
  27.     <!-- 2、引入js -->
  28.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  29.     <script src="jsrender.min.js"></script>
  30. </body>
  31. </html>
  33. <script>
  34.     // 3、数据
  35.     var data = {
  36.         msg:"你好",
  37.         type:'1',
  38.         info:{
  39.             name:"www",
  40.             age:"18"
  41.         }
  42.     }
  44.     // 4、编译成元素并添加到容器中
  45.     $("#content").html($("#Tem").render(data))
  46. </script>

判断 效果：
判断.png-2.9kB

for 循环数组

{{:#data}} 展示数组元素内容

例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         {{for info}}
  13.             <p>{{:#data}}</p>
  14.         {{/for}}
  15.     </script>
  17.     <!-- 2、引入js -->
  18.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  19.     <script src="jsrender.min.js"></script>
  20. </body>
  21. </html>
  23. <script>
  24.     // 3、数据
  25.     var data = {
  26.         info: ['www', 'abc', '123']
  27.     }
  29.     // 4、编译成元素并添加到容器中
  30.     $("#content").html($("#Tem").render(data))
  31. </script>

for 循环数组对象 [{},{}]

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <table width="500px" border="1" cellpadding="0" cellspacing="0" align="center">
  13.             <tr>
  14.                 <th>姓名</th>
  15.                 <th>年龄</th>
  16.             </tr>
  17.             {{for data.info}}
  18.                 <tr align="center">
  19.                     <td>{{:name}}</td>
  20.                     <td>{{:age}}</td>
  21.                 </tr>
  22.             {{/for}}
  23.         </table>
  24.     </script>
  26.     <!-- 2、引入js -->
  27.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  28.     <script src="jsrender.min.js"></script>
  29. </body>
  30. </html>
  32. <script>
  33.     // 3、数据
  34.     var data = {
  35.         msg:"你好",
  36.         type:'1',
  37.         data:{
  38.             id: "01",
  39.             info: [
  40.                 {
  41.                     name: "www",
  42.                     age: 18
  43.                 },
  44.                 {
  45.                     name: "aaa",
  46.                     age: 20
  47.                 },
  48.                 {
  49.                     name: "bbb",
  50.                     age: 30
  51.                 },
  52.                 {
  53.                     name: "ccc",
  54.                     age: 40
  55.                 },
  56.                 {
  57.                     name: "ddd",
  58.                     age: 50
  59.                 },
  60.                 {
  61.                     name: "eee",
  62.                     age: 60
  63.                 },
  64.                 {
  65.                     name: "fff",
  66.                     age: 70
  67.                 },
  68.             ]
  69.         }
  70.     }
  72.     // 4、编译成元素并添加到容器中
  73.     $("#content").html($("#Tem").render(data))
  74. </script>

循环 效果：
循环.png-5.8kB

props 循环对象

{{>key}} 获取元素名

{{>prop}} 获取元素值

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <table width="500px" border="1" cellpadding="0" cellspacing="0" align="center">
  13.             <tr>
  14.                 <th>姓名</th>
  15.                 <th>年龄</th>
  16.             </tr>
  17.             {{props info}}
  18.                 <tr align="center">
  19.                     <td>{{:prop.name}}</td>
  20.                     <td>{{:prop.age}}</td>
  21.                 </tr>
  22.             {{/props}}
  23.         </table>
  24.     </script>
  26.     <!-- 2、引入js -->
  27.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  28.     <script src="jsrender.min.js"></script>
  29. </body>
  30. </html>
  32. <script>
  33.     // 3、数据
  34.     var data = {
  35.         info: {
  36.             "a" : {
  37.                 name: "www",
  38.                 age: 18
  39.             },
  40.             "b" : {
  41.                 name: "aaa",
  42.                 age: 20
  43.             },
  44.             "c" : {
  45.                 name: "bbb",
  46.                 age: 30
  47.             }
  48.         }
  49.     }
  51.     // 4、编译成元素并添加到容器中
  52.     $("#content").html($("#Tem").render(data))
  53. </script>

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <table width="500px" border="1" cellpadding="0" cellspacing="0" align="center">
  13.             <tr>
  14.                 <th>姓名</th>
  15.                 <th>年龄</th>
  16.             </tr>
  17.             {{props info}}
  18.                 <tr align="center">
  19.                     <td>{{>prop}}</td>
  20.                     <td>{{>prop}}</td>
  21.                 </tr>
  22.             {{/props}}
  23.         </table>
  24.     </script>
  26.     <!-- 2、引入js -->
  27.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  28.     <script src="jsrender.min.js"></script>
  29. </body>
  30. </html>
  32. <script>
  33.     // 3、数据
  34.     var data = {
  35.         info: {
  36.             name: "www",
  37.             name: "aaa",
  38.             name: "bbb"
  39.         }
  40.     }
  42.     // 4、编译成元素并添加到容器中
  43.     $("#content").html($("#Tem").render(data))
  44. </script>

循环数组对象时添加参数 {{for 数据 ~命名=属性名}}

使用：

  1. 1、添加参数，参数必须以~开头，多个参数用空格分隔
  2. 2、通过参数(~命名)，我们缓存了父级下的属性，在子循环中通过 {{:~命名}} 访问参数，就可以间接访问父级数据

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <table width="500px" border="1" cellpadding="0" cellspacing="0" align="center" style="margin-top: 50px;">
  13.             <tr>
  14.                 <th>~infoId</th>
  15.                 <th>~type</th>
  16.                 <th>#data.属性名</th>
  17.                 <th>姓名</th>
  18.                 <th>年龄</th>
  19.             </tr>
  20.             {{for arr.info ~type=type ~infoId=arr.id}}
  21.                 <tr align="center">
  22.                     <td>{{:~infoId}}</td>
  23.                     <td>{{:~type}}</td>
  24.                     <td>{{:#data.name}}</td> {{!-- #data相当于this(arr) --}}
  25.                     <td>{{:name}}</td>
  26.                     <td>{{:age}}</td>
  27.                 </tr>
  28.             {{/for}}
  29.         </table>
  30.     </script>
  32.     <!-- 2、引入js -->
  33.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  34.     <script src="jsrender.min.js"></script>
  35. </body>
  36. </html>
  38. <script>
  39.     // 3、数据
  40.     var data = {
  41.         msg:"你好",
  42.         type:'1',
  43.         arr:{
  44.             id: "01",
  45.             info: [
  46.                 {
  47.                     name: "www",
  48.                     age: 18
  49.                 },
  50.                 {
  51.                     name: "aaa",
  52.                     age: 20
  53.                 },
  54.                 {
  55.                     name: "bbb",
  56.                     age: 30
  57.                 }
  58.             ]
  59.         }
  60.     }
  62.     // 4、编译成元素并添加到容器中
  63.     $("#content").html($("#Tem").render(data))
  64. </script>

循环时添加参数 效果：
循环-定参.png-5.7kB

循环中获取父级元素的内容 #parent.parent.data.属性名

注意

1、data不能省略
2、说是获取父级元素，但是好像也是从顶层找起，与~root效果一样
3、测不出获取父级元素的效果，也没有找到相关文档

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <table width="500px" border="1" cellpadding="0" cellspacing="0" align="center" style="margin-top: 50px;">
  13.             <tr>
  14.                 <th>type</th>
  15.                 <th>id</th>
  16.                 <th>arr1.id</th>
  17.                 <th>姓名</th>
  18.                 <th>年龄</th>
  19.             </tr>
  20.             {{for arr.info}}
  21.                 <tr align="center">
  22.                     <td>{{:#parent.parent.data.type}}</td>
  23.                     <td>{{:#parent.parent.data.id}}</td>
  24.                     <td>{{:#parent.parent.data.arr.id}}</td>
  25.                     <td>{{:name}}</td>
  26.                     <td>{{:age}}</td>
  27.                 </tr>
  28.             {{/for}}
  29.             <tfoot>
  30.                 <tr>
  31.                     <td colspan="5" align="center">注意： 多级下，使用#parent.parent.data.id获取不到info父级(arr)下的id，父级好像是data，而不是arr，所以需要使用arr.id</td>
  32.                 </tr>
  33.             </tfoot>
  34.         </table>
  35.     </script>
  37.     <!-- 2、引入js -->
  38.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  39.     <script src="jsrender.min.js"></script>
  40. </body>
  41. </html>
  43. <script>
  44.     // 3、数据
  45.     var data = {
  46.         msg:"你好",
  47.         type:'1',
  48.         arr:{
  49.             id: "01",
  50.             info: [
  51.                 {
  52.                     name: "www",
  53.                     age: 18
  54.                 },
  55.                 {
  56.                     name: "aaa",
  57.                     age: 20
  58.                 },
  59.                 {
  60.                     name: "bbb",
  61.                     age: 30
  62.                 }
  63.             ]
  64.         }
  65.     }
  67.     // 4、编译成元素并添加到容器中
  68.     $("#content").html($("#Tem").render(data))
  69. </script>

父级 #parent.parent.data.属性名 效果：
循环-父级.png-11.2kB

循环中获取根元素的内容 ~root.属性名

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <table width="500px" border="1" cellpadding="0" cellspacing="0" align="center" style="margin-top: 50px;">
  13.             <tr>
  14.                 <th>type</th>
  15.                 <th>~root.type</th>
  16.                 <th>姓名</th>
  17.                 <th>年龄</th>
  18.             </tr>
  19.             {{for arr.info}}
  20.                 <tr align="center">
  21.                     <td>{{:type}}</td>
  22.                     <td>{{:~root.type}}</td>
  23.                     <td>{{:name}}</td>
  24.                     <td>{{:age}}</td>
  25.                 </tr>
  26.             {{/for}}
  27.         </table>
  28.     </script>
  30.     <!-- 2、引入js -->
  31.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  32.     <script src="jsrender.min.js"></script>
  33. </body>
  34. </html>
  36. <script>
  37.     // 3、数据
  38.     var data = {
  39.         type:'1',
  40.         arr:{
  41.             info: [
  42.                 {
  43.                     name: "www",
  44.                     age: 18
  45.                 },
  46.                 {
  47.                     name: "aaa",
  48.                     age: 20
  49.                 },
  50.                 {
  51.                     name: "bbb",
  52.                     age: 30
  53.                 }
  54.             ]
  55.         }
  56.     }
  58.     // 4、编译成元素并添加到容器中
  59.     $("#content").html($("#Tem").render(data))
  60. </script>

顶级 ~root.属性名 效果：
循环-顶级.png-4.5kB

循环中获取索引 #getIndex() 或 #index

注意: 索引从0开始

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <table width="500px" border="1" cellpadding="0" cellspacing="0" align="center" style="margin-top: 50px;">
  13.             <tr>
  14.                 <th>#getIndex()</th>
  15.                 <th>#index</th>
  16.                 <th>姓名</th>
  17.                 <th>年龄</th>
  18.             </tr>
  19.             {{for arr.info}}
  20.                 <tr align="center">
  21.                     <td>{{:#getIndex()}}</td>
  22.                     <td>{{:#index}}</td>
  23.                     <td>{{:name}}</td>
  24.                     <td>{{:age}}</td>
  25.                 </tr>
  26.             {{/for}}
  27.         </table>
  28.     </script>
  30.     <!-- 2、引入js -->
  31.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  32.     <script src="jsrender.min.js"></script>
  33. </body>
  34. </html>
  36. <script>
  37.     // 3、数据
  38.     var data = {
  39.         type:'1',
  40.         arr:{
  41.             info: [
  42.                 {
  43.                     name: "www",
  44.                     age: 18
  45.                 },
  46.                 {
  47.                     name: "aaa",
  48.                     age: 20
  49.                 },
  50.                 {
  51.                     name: "bbb",
  52.                     age: 30
  53.                 }
  54.             ]
  55.         }
  56.     }
  58.     // 4、编译成元素并添加到容器中
  59.     $("#content").html($("#Tem").render(data))
  60. </script>

循环获取索引 效果：
循环-索引.png-4kB

获取数组长度 Array.length

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <table width="500px" border="1" cellpadding="0" cellspacing="0" align="center" style="margin-top: 50px;">
  13.             <tr>
  14.                 <th>姓名</th>
  15.                 <th>年龄</th>
  16.             </tr>
  17.             {{for arr.info}}
  18.                 <tr align="center">
  19.                     <td>{{:name}}</td>
  20.                     <td>{{:age}}</td>
  21.                 </tr>
  22.             {{/for}}
  23.             <tfoot>
  24.                 <tr align="center">
  25.                     <td colspan="2">长度： {{:arr.info.length}}</td>
  26.                 </tr>
  27.             </tfoot>
  28.         </table>
  29.     </script>
  31.     <!-- 2、引入js -->
  32.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  33.     <script src="jsrender.min.js"></script>
  34. </body>
  35. </html>
  37. <script>
  38.     // 3、数据
  39.     var data = {
  40.         type:'1',
  41.         arr:{
  42.             info: [
  43.                 {
  44.                     name: "www",
  45.                     age: 18
  46.                 },
  47.                 {
  48.                     name: "aaa",
  49.                     age: 20
  50.                 },
  51.                 {
  52.                     name: "bbb",
  53.                     age: 30
  54.                 }
  55.             ]
  56.         }
  57.     }
  59.     // 4、编译成元素并添加到容器中
  60.     $("#content").html($("#Tem").render(data))
  61. </script>

数组长度 效果：
数组长度.png-3.9kB

获取数组中指定的某个元素 Array[下标] 或 Array[下标].元素名

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <p>数组下标为2的名称 {{:arr[2].name}}</p>
  13.     </script>
  15.     <!-- 2、引入js -->
  16.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  17.     <script src="jsrender.min.js"></script>
  18. </body>
  19. </html>
  21. <script>
  22.     // 3、数据
  23.     var data = {
  24.         arr:[
  25.             {
  26.                 name: "www",
  27.                 age: 18
  28.             },
  29.             {
  30.                 name: "aaa",
  31.                 age: 20
  32.             },
  33.             {
  34.                 name: "bbb",
  35.                 age: 30
  36.             }
  37.         ]
  38.     }
  40.     // 4、编译成元素并添加到容器中
  41.     $("#content").html($("#Tem").render(data))
  42. </script>

数组中指定的某个元素 Array.[下标] 效果：
数组某个元素.png-1.8kB

模板嵌套模板 {{include 数据 tmpl="#另一个模板" /}}

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <p>{{:msg}}</p>
  13.         {{include info tmpl="#Tem1" /}}
  14.     </script>
  16.     <script type="text/x-jsrender" id="Tem1">
  17.         <table width="500px" border="1" cellpadding="0" cellspacing="0" style="margin-top: 20px;">
  18.             <tr>
  19.                 <th>姓名</th>
  20.                 <th>年龄</th>
  21.             </tr>
  22.             {{for child}}
  23.                 <tr align="center">
  24.                     <td>{{:name}}</td>
  25.                     <td>{{:age}}</td>
  26.                 </tr>
  27.             {{/for}}
  28.         </table>
  29.     </script>
  31.     <!-- 2、引入js -->
  32.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  33.     <script src="jsrender.min.js"></script>
  34. </body>
  35. </html>
  37. <script>
  38.     // 3、数据
  39.     var data = {
  40.         msg: "名单列表：",
  41.         info: {
  42.             child: [
  43.                 {
  44.                     name: "www",
  45.                     age: 18
  46.                 },
  47.                 {
  48.                     name: "aaa",
  49.                     age: 20
  50.                 },
  51.                 {
  52.                     name: "bbb",
  53.                     age: 30
  54.                 }
  55.             ]
  56.         }
  57.     }
  59.     // 4、编译成元素并添加到容器中
  60.     $("#content").html($("#Tem").render(data))
  61. </script>

模板嵌套模板 {{include evt tmpl="#另一个模板" /}} 效果：
模板嵌套模板.png-4.5kB

转换器 $.views.converters()定义

使用：

  1.     // 转换器
  2.     $.views.converters({
  3.         func:function (type){},
  4.         func1:function (val){}
  5.     })
  7.     // 引用
  8.     {{func:属性名}}

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <p>{{:msg}}</p>
  13.         <table width="500px" border="1" cellpadding="0" cellspacing="0" style="margin-top: 20px;">
  14.             <tr>
  15.                 <th>姓名</th>
  16.                 <th>年龄</th>
  17.                 <th>爱好</th>
  18.                 <th>属于</th>
  19.             </tr>
  20.             {{for info.child}}
  21.                 <tr align="center">
  22.                     <td>{{:name}}</td>
  23.                     <td>{{:age}}</td>
  24.                     <td>{{:like}}</td>
  25.                     <td>{{typeFun:type}}</td>
  26.                 </tr>
  27.             {{/for}}
  28.         </table>
  29.     </script>
  31.     <!-- 2、引入js -->
  32.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  33.     <script src="jsrender.min.js"></script>
  34. </body>
  35. </html>
  37. <script>
  38.     // 3、数据
  39.     var data = {
  40.         msg: "名单列表：",
  41.         info: {
  42.             child: [
  43.                 {
  44.                     name: "www",
  45.                     age: 18,
  46.                     like:"玫瑰",
  47.                     type:"01"
  48.                 },
  49.                 {
  50.                     name: "aaa",
  51.                     age: 20,
  52.                     like:"松树",
  53.                     type:"03"
  54.                 },
  55.                 {
  56.                     name: "bbb",
  57.                     age: 30,
  58.                     like:"四叶草",
  59.                     type:"02"
  60.                 }
  61.             ]
  62.         }
  63.     }
  65.     // 定义 转换器
  66.     var str = {
  67.         "01": "花",
  68.         "02": "草",
  69.         "03": "树",
  70.         "04": "木",
  71.     }
  73.     $.views.converters({
  74.         typeFun: function (type){
  75.             return str[type]
  76.         }
  77.     })
  79.     // 4、编译成元素并添加到容器中
  80.     $("#content").html($("#Tem").render(data))
  81. </script>

转换器 效果：
转换器.png-6.5kB

帮助方法 $.views.helpers()定义

使用：

  1.     // 方法
  2.     $.views.helpers({
  3.         Fun:function (type,val){},
  4.         Fun1:function (val){}
  5.     })
  7.     // 引用
  8.     {{:~Fun(属性名1, 属性名2, ...)}}

例子： isTrue 如果为true 显示类型

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <p>{{:msg}}</p>
  13.         <table width="500px" border="1" cellpadding="0" cellspacing="0" style="margin-top: 20px;">
  14.             <tr>
  15.                 <th>姓名</th>
  16.                 <th>年龄</th>
  17.                 <th>爱好</th>
  18.                 <th>真爱</th>
  19.             </tr>
  20.             {{for info.child}}
  21.                 <tr align="center">
  22.                     <td>{{:name}}</td>
  23.                     <td>{{:age}}</td>
  24.                     <td>{{:like}}</td>
  25.                     <td>{{:~typeFun(type,isTrue)}}</td>
  26.                 </tr>
  27.             {{/for}}
  28.         </table>
  29.     </script>
  31.     <!-- 2、引入js -->
  32.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  33.     <script src="jsrender.min.js"></script>
  34. </body>
  35. </html>
  37. <script>
  38.     // 3、数据
  39.     var data = {
  40.         msg: "名单列表：",
  41.         info: {
  42.             child: [
  43.                 {
  44.                     name: "www",
  45.                     age: 18,
  46.                     like:"玫瑰",
  47.                     type:"01",
  48.                     isTrue:true
  49.                 },
  50.                 {
  51.                     name: "aaa",
  52.                     age: 20,
  53.                     like:"松树",
  54.                     type:"03",
  55.                     isTrue:false
  56.                 },
  57.                 {
  58.                     name: "bbb",
  59.                     age: 30,
  60.                     like:"四叶草",
  61.                     type:"02",
  62.                     isTrue:true
  63.                 }
  64.             ]
  65.         }
  66.     }
  68.     // 定义 转换器
  69.     var str = {
  70.         "01": "花",
  71.         "02": "草",
  72.         "03": "树",
  73.         "04": "木",
  74.     }
  76.     $.views.helpers({
  77.         typeFun: function (type,isTrue){
  78.             return isTrue ? str[type] : ""
  79.         }
  80.     })
  82.     // 4、编译成元素并添加到容器中
  83.     $("#content").html($("#Tem").render(data))
  84. </script>

方法 效果：
方法.png-6.2kB

自定义标签 $.views.tags()

使用：

  1.     // 方法
  2.     $.views.tags({
  3.         Fun:function (type,val){},
  4.         Fun1:function (val){}
  5.     })
  7.     // 引用
  8.     {{Fun 属性名1 属性名2 /}}

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="content"></div>
  10.     <!-- 1、定义模板 -->
  11.     <script type="text/x-jsrender" id="Tem">
  12.         <p>{{Fun val /}}</p>
  13.         <p>{{Fun1 name val /}}</p>
  14.     </script>
  16.     <!-- 2、引入js -->
  17.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  18.     <script src="jsrender.min.js"></script>
  19. </body>
  20. </html>
  22. <script>
  23.     // 3、数据
  24.     var data = {
  25.         name: "www",
  26.         val:"花"
  27.     }
  29.     // 自定义标签
  30.     $.views.tags({
  31.         Fun: function (val){
  32.             return '可以出去看<span style="color:red;">' + val + '</span>'
  33.         },
  34.         Fun1:function (name,like){
  35.             return name + '喜欢' + like
  36.         }
  37.     })
  39.     // 4、编译成元素并添加到容器中
  40.     $("#content").html($("#Tem").render(data))
  41. </script>

自定义标签 $.views.tags() 效果：
自定义标签.png-1.9kB

作者 wendy
2018 年 12月 21日

参考文献

更多参考官网
JsRender 前端渲染模板基础学习

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注