[关闭]
@Wangww0925 2020-07-15T07:13:28.000000Z 字数 11542 阅读 512

JsViews 模板

模板引擎 jsRender/jsViews

JsViews是基于JsRender并具有动态绑定功能的模板

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

使用

  1. 1、定义模板： <script type="text/x-jsrender" id="Tem"></script>
  2. 2、引入js
  3. 3、数据：要json对象
  4. 4、使用：
  5.     方法一： 使用 myTmpl.link()【--推荐】
  6.         1. 创建模板：var html =$.templates("#Tem");
  7.         2. 调用link()模板的方法，渲染模板: html.link("#content", data)
  9.     方法二： $.link.myTem()
  10.         1. $.templates("myTem", "#Tem");
  11.         2. $.link.myTem("#content", data, helpersOrContext, noIteration);
  12.         3. 参数说明：
  13.             myTem: 命名模板为myTem，可以随意修改，但是要与$.link.myTem()的myTem保持一致
  14.             data: 数据
  15.             helpersOrContext：上下文辅助方法或属性，使用 {:~属性名} 调用
  16.             noIteration：不传，或者 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 id="temp" type="text/x-jsrender">
  12.         <p>{{:name}}</p>
  13.     </script>
  15.     <!-- 2、引入js -->
  16.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  17.     <script src="jsviews.min.js"></script>
  19.     <script>
  20.         // 3、数据：要json对象
  21.         var data = {
  22.             name:"www"
  23.         }
  25.         // 4、方法一
  26.         $.templates("#temp").link("#content", data);
  28.         // 4、方法二
  29.         // var temp = $.templates("temp", "#temp")
  30.         // $.link.temp("#content", data);
  31.     </script>
  32. </body>
  33. </html>

数据双向绑定 data-link="属性名"

注意：{^{:name}}动态绑定数据，data-link="name"动态更改数据，trigger=false让其失去焦点才触发

例子：

  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 id="temp" type="text/x-jsrender">
  12.         <p>
  13.             输入就触发数据更改： <input type="text" data-link="name">
  14.         </p>
  15.         <p>
  16.             失去焦点才触发数据更改： <input type="text" data-link="name trigger=false">
  17.         </p>
  18.         <p>动态绑定数据： {^{:name}}</p>
  19.     </script>
  21.     <!-- 2、引入js -->
  22.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  23.     <script src="jsviews.min.js"></script>
  25.     <script>
  26.         // 3、数据：要json对象
  27.         var data = {
  28.             name:"www"
  29.         }
  31.         // 4、方法一
  32.         $.templates("#temp").link("#content", data);
  33.     </script>
  34. </body>
  35. </html>

绑定事件 {on 事件名}

注意：
使用data-link="{on ...}" 或者 {^{on ...}}
{^{on ...}} 该元件是由标签包裹标签（或多个标签），标记为按钮
{^{on ...}} 仅包装文本时，{^{on ...}}自动转为 <button>标签
{^{on ... tmpl='文本'}} 使用 tmpl='文本' 属性生成 带有文本的<button>标签

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .red {color: red;}
  8.     </style>
  9. </head>
  10. <body>    
  11.     <div id="content"></div>
  13.     <!-- 1、定义模板 -->
  14.     <script id="temp" type="text/x-jsrender">
  15.         <p>{{:name}}</p>
  16.         <p>
  17.             <span data-link="{on ~add}">点击1</span>
  18.             {^{on ~add}}<button>点击2</button>{{/on}}
  19.             {^{on ~add}}点击3{{/on}}
  20.             {^{on ~add tmpl="点击4" /}}
  21.             {^{on ~add /}}
  22.             {^{on ~add height=18 width=75 class="red" id="btn5"}}点击6{{/on}}
  23.         </p>
  24.     </script>
  26.     <!-- 2、引入js -->
  27.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  28.     <script src="jsviews.min.js"></script>
  29.     <script>
  30.         // 3、数据：要json对象
  31.         var data = {
  32.             name: "www" 
  33.         }
  35.         var fun = {
  36.             add: function (){
  37.                 $("#content").append("你点了我" + (new Date()) + "<br>")
  38.             }
  39.         }
  41.         // 4、方法二
  42.         var temp = $.templates("temp", "#temp");
  43.         $.link.temp("#content", data, fun);
  44.     </script>
  45. </body>
  46. </html>

class动态更改

注意： data-link="class{:isRed ? 'red' : 'blue'}" 和 merge

  1. <p data-link="class{:isRed ? 'redBorder red' : 'redBorder blue'}">hello world</p>
  3. <p class="redBorder" data-link="
  4.     class{merge:isTrue toggle='red yellowBg'}
  5.     class{merge:!isTrue toggle='blue'}
  6. ">www</p>

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .red {color: red;}
  8.         .blue {color: blue;}
  9.         .redBorder {border: 1px solid red;}
  10.         .yellowBg{background-color: yellow;}
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="content"></div>
  16.     <!-- 1、定义模板 -->
  17.     <script id="temp" type="text/x-jsrender">
  18.         <h3>写法一</h3>
  19.         <p>isRed : <input type="checkbox" data-link="isRed"> {^{:isRed}}</p>
  20.         <p data-link="class{:isRed ? 'redBorder red' : 'redBorder blue'}">hello world</p>
  21.         <hr>
  23.         <h3>写法二</h3>
  24.         <p>isTrue : <input type="checkbox" data-link="isTrue"> {^{:isTrue}}</p>
  25.         <p class="redBorder" data-link="
  26.             class{merge:isTrue toggle='red yellowBg'}
  27.             class{merge:!isTrue toggle='blue'}
  28.         ">www</p>
  29.     </script>
  31.     <!-- 2、引入js -->
  32.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  33.     <script src="jsviews.min.js"></script>
  34.     <script>
  35.         // 3、数据：要json对象
  36.         var data = {
  37.             isRed: true,
  38.             isTrue: true
  39.         }
  41.         // 4、方法二
  42.         $.templates("#temp").link("#content", data);
  43.     </script>
  44. </body>
  45. </html>

css动态绑定

注意：

  1. <p data-link="
  2.     css-color{:color}
  3.     css-background-color{:bg}
  4.     css-border{:border}
  5.     class{merge:isTrue toggle='fb'}
  6.     {:text}
  7. "></p>

例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .fb {
  8.             font-weight: 700;
  9.             font-size: 20px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>    
  14.     <div id="content"></div>
  16.     <!-- 1、定义模板 -->
  17.     <script id="temp" type="text/x-jsrender">
  18.         内容： <input type="text" data-link="text"><br>
  19.         color： <input type="text" data-link="color"><br>
  20.         bg： <input type="text" data-link="bg"><br>
  21.         border： <input type="text" data-link="border"><br>
  23.         <p data-link="
  24.             css-color{:color}
  25.             css-background-color{:bg}
  26.             css-border{:border}
  27.             class{merge:isTrue toggle='fb'}
  28.             {:text}
  29.         "></p>
  30.     </script>
  32.     <!-- 2、引入js -->
  33.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  34.     <script src="jsviews.min.js"></script>
  35.     <script>
  36.         // 3、数据：要json对象
  37.         var data = {
  38.             color: 'red',
  39.             bg: 'yellow',
  40.             border: '1px solid blue',
  41.             isTrue: true,
  42.             text: '你好呀'
  43.         }
  45.         // 4、方法二
  46.         $.templates("#temp").link("#content", data);
  47.     </script>
  48. </body>
  49. </html>

元素visible显示隐藏

注意： data-link="visible{:isShow}" 和 <input type="checkbox" data-link="isShow">

例子：

  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 id="temp" type="text/x-jsrender">
  12.         <p>
  13.             <input type="checkbox" data-link="isShow"> {^{:isShow}}
  14.         </p>
  15.         <div data-link="visible{:isShow}">isShow为 真 显示</div>
  16.         <div data-link="visible{:!isShow}">isShow为 假 显示</div>
  17.     </script>
  19.     <!-- 2、引入js -->
  20.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  21.     <script src="jsviews.min.js"></script>
  22.     <script>
  23.         // 3、数据：要json对象
  24.         var data = {
  25.             isShow: true
  26.         }
  28.         // 4、方法二
  29.         $.templates("#temp").link("#content", data);
  30.     </script>
  31. </body>
  32. </html>

动态更改array数据

数组添加新的内容

  1. $.observable(data.info).insert({ name: 'new', age: 18 });   // insert添加新的内容

移动数组内元素的位置

  1. $.observable(data.info).move(1, 0);    // move 将索引1移到索引0的前面

数组翻转

  1. $.observable(data.info).refresh(data.info.slice().reverse());    // refresh 执行数组翻转操作等

删除数组最后一项

  1. $.observable(data.info).remove();    // remove移除最后一项

删除数组指定索引元素

  1. $.observable(data.info).remove(2);    // remove移除索引为2的数据

例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .w50{width: 50px;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <p>
  12.         <input type="text" id="name">
  13.         <input type="text" id="age">
  14.         <button onclick="add()">insert 新增</button>
  15.     </p>
  17.     <p>
  18.         将索引 <input type="text" id="move1" class="w50" value="1" > 移到索引 <input type="text" id="move2" class="w50" value="0">前
  19.         <button onclick="move()">move 移动</button>
  20.     </p>
  22.     <button onclick="refresh()">refresh 排序</button>
  24.     <button onclick="remove()">删除最后一项</button>
  26.     <div id="content"></div>
  28.     <!-- 1、定义模板 -->
  29.     <script id="temp" type="text/x-jsrender">
  31.         <table>
  32.             <tbody>
  33.                 <tr>
  34.                     <th>序列</th>
  35.                     <th>名字</th>
  36.                     <th>年龄</th>
  37.                 </tr>
  38.                 {^{for info}}
  39.                     <tr align="center">
  40.                         <td>{^{:#index + 1}}</td>
  41.                         <td>{^{:name}}</td>
  42.                         <td>{^{:age}}</td>
  43.                     </tr>
  44.                 {{/for}}
  45.             </tbody>
  46.         </table>
  47.     </script>
  49.     <!-- 2、引入js -->
  50.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  51.     <script src="jsviews.min.js"></script>
  52.     <script>
  53.         // 3、数据：要json对象
  54.         var data = {
  55.             info: [
  56.                 {
  57.                     name: "www",
  58.                     age: 18
  59.                 },
  60.                 {
  61.                     name: "abc",
  62.                     age: 20
  63.                 },
  64.                 {
  65.                     name: "nh",
  66.                     age: 21
  67.                 }
  68.             ]
  69.         }
  71.         // 4、方法一
  72.         $.templates("#temp").link("#content", data);
  74.         // 数组动态更改方法
  75.         function add(){
  76.             $.observable(data.info).insert({ name: $("#name").val(), age: $("#age").val() });
  77.         }
  79.         function move(){
  80.             $.observable(data.info).move($("#move1").val(), $("#move2").val());
  81.         }
  83.         function refresh(){
  84.             $.observable(data.info).refresh(data.info.slice().reverse());
  85.         }
  87.         function remove(){
  88.             $.observable(data.info).remove();
  89.         }
  90.     </script>
  91. </body>
  92. </html>

监听array数据更改 arrayChange

注意：

  1. /**
  2. * 监听data数据更改 arrayChange监听事件
  3. * 数据需要用 [] 包裹
  4. */
  5. $([data.arr]).on("arrayChange", function (e, obj){
  6.     /**
  7.     * change: 更改事件
  8.     * index： 索引
  9.     * items： 更改的内容
  10.     */
  11.     // console.log(e, obj)
  12. });

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .w50{width: 50px;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <p>
  12.         <input type="text" id="val">
  13.         <button onclick="add()">insert 新增</button>
  14.     </p>
  15.     <button onclick="remove()">删除最后一项</button>
  17.     <div id="content"></div>
  19.     <!-- 1、定义模板 -->
  20.     <script id="temp" type="text/x-jsrender">
  21.         {^{for arr}}
  22.             <li>{{:~root.arr[#getIndex()]}}</li>
  23.         {{/for}}
  24.     </script>
  26.     <!-- 2、引入js -->
  27.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  28.     <script src="jsviews.min.js"></script>
  29.     <script>
  30.         // 3、数据：要json对象
  31.         var data = {
  32.             arr: ['aa','bb','cc']
  33.         }
  35.         // 4、方法一
  36.         $.templates("#temp").link("#content", data);
  38.         // 动态更改方法
  39.         function add(){
  40.             $.observable(data.arr).insert($("#val").val())
  41.         }
  42.         function remove(){
  43.             $.observable(data.arr).remove();
  44.         }
  46.         /**
  47.         * 监听data数据更改 arrayChange监听事件
  48.         * 数据需要用 [] 包裹
  49.         */
  50.         $([data.arr]).on("arrayChange", function (e, obj){
  51.             /**
  52.             * change: 更改事件
  53.             * index： 索引
  54.             * items： 更改的内容
  55.             */
  56.             // console.log(e, obj)
  57.         });
  58.     </script>
  59. </body>

动态更改object数据

修改object属性

  1. $.observable(data.person).setProperty("name", 'newName');   // setProperty 修改person下的name属性

删除object属性

  1. $.observable(data.person).removeProperty("like");   // removeProperty 删除person下的like属性

例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .w50{width: 50px;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <p>
  12.         <input type="text" id="name">
  13.         <button onclick="modify()">setProperty 修改</button>
  14.     </p>
  16.     <button onclick="remove()">removeProperty 删除like</button>
  18.     <div id="content"></div>
  20.     <!-- 1、定义模板 -->
  21.     <script id="temp" type="text/x-jsrender">
  22.         <span>{^{:person.name}}</span>
  23.         <span>{^{:person.age}}</span>
  24.         <span>{^{:person.like}}</span>
  25.     </script>
  27.     <!-- 2、引入js -->
  28.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  29.     <script src="jsviews.min.js"></script>
  30.     <script>
  31.         // 3、数据：要json对象
  32.         var data = {
  33.             person:{
  34.                 name: "www",
  35.                 age: 18,
  36.                 like: "花草树木"
  37.             }
  38.         }
  40.         // 4、方法一
  41.         $.templates("#temp").link("#content", data);
  43.         // 对象动态更改方法
  44.         function modify(){
  45.             $.observable(data).setProperty("person.name",$("#name").val());
  46.         }
  47.         function remove(){
  48.             $.observable(data).removeProperty("person.like");
  49.         }
  50.     </script>
  51. </body>
  52. </html>

监听object数据更改 propertyChange

注意：

  1. // data： 监听的数据
  2. // propertyChange 监听事件
  3. $(data).on("propertyChange", function (e, obj){
  4.     /**
  5.     * obj对象属性
  6.     *   path： 更改的属性名
  7.     *   oldValue： 旧的数据
  8.     *   value：新的数据
  9.     */
  10. });

例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .w50{width: 50px;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <p>
  12.         <input type="text" id="name">
  13.         <button onclick="modify()">setProperty 修改</button>
  14.     </p>
  16.     <div id="content"></div>
  18.     <!-- 1、定义模板 -->
  19.     <script id="temp" type="text/x-jsrender">
  20.         <span>{^{:name}}</span>
  21.     </script>
  23.     <!-- 2、引入js -->
  24.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  25.     <script src="jsviews.min.js"></script>
  26.     <script>
  27.         // 3、数据：要json对象
  28.         var data = {
  29.             name: "www"
  30.         }
  32.         // 4、方法一
  33.         $.templates("#temp").link("#content", data);
  35.         // 动态更改方法
  36.         function modify(){
  37.             $.observable(data).setProperty("name",$("#name").val())
  38.         }
  40.         // 监听data数据更改；propertyChange 监听事件
  41.         $(data).on("propertyChange", function (e, obj){
  42.             /**
  43.             * obj对象属性
  44.             *   path： 更改的属性名
  45.             *   oldValue： 旧的数据
  46.             *   value：新的数据
  47.             */
  48.             $("body").append("将data." + obj.path + "原数据 " + obj.oldValue + "改成 " + obj.value + '<br>')
  49.         });
  50.     </script>
  51. </body>
  52. </html>

获取点击li的数据 $.view(this).data

  1.     $("ul li").unbind();
  2.     $("ul li").click(function(){
  3.         var data = $.view(this).data;
  4.         console.log(data)
  5.     })

例子：

  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 id="temp" type="text/x-jsrender">
  12.         <ul>
  13.             {^{for data}}
  14.                 <li>{{:#data}}</li>
  15.             {{/for}}
  16.         </ul>
  17.     </script>
  19.     <!-- 2、引入js -->
  20.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  21.     <script src="jsviews.min.js"></script>
  23.     <script>
  24.         // 3、数据：要json对象
  25.         var data = {
  26.             data: [1,2,3,4,5]
  27.         }
  29.         // 4、方法一
  30.         $.templates("#temp").link("#content", data);
  32.         // 点击li
  33.         $("ul li").unbind();
  34.         $("ul li").click(function(){
  35.             var data = $.view(this).data;
  36.             console.log(data);
  37.         })
  38.     </script>
  39. </body>
  40. </html>

获取点击li的索引 $.view(this).getIndex()

  1.     $("ul li").unbind();
  2.     $("ul li").click(function(){
  3.         var index = $.view(this).getIndex();
  4.         console.log(index)
  5.     })

获取点击li的父元素 $.view(this).parent.data || $.view(this).parent.parent.parent.data

注意根据具体数据一层一层往上找

  1.     $("ul li").unbind();
  2.     $("ul li").click(function(){
  3.         var parent = $.view(this).parent.data;
  4.         console.log(parent);
  6.         var parent1 = $.view(this).parent.parent.parent.data;
  7.         console.log(parent1);
  8.     })

作者 wendy
2018 年 12月 21日

参考文献

更多参考官网

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