JsRender知识点
2024-06-21 23:49:15
一、 引用
JsRender是建立在JQuery之上，所以必须先引用JQuery，再引用JsRender。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body></body>
</html>
二、 数据渲染
将数据渲染进标签模板中，然后再将结果添加进网页。
注意：标签模板的type类型必须为text/template
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="test" type="text/template"><p>{{:userName}}的年龄是{{:age}}</p></script><script>var data = [{userName:“”, aget:18},{userName:“”, aget:18},{userName:“”, aget:18},];var resData = $("#test").render(data); // 将数据与标签模板绑定$("div").append(resData); // 将绑定后的结果写入页面中console.log(resData); // 查看resData生成了什么</script></body>
</html>
三、 赋值方式
1、{{:对象的属性名}}
这种赋值方式，如果属性值里面包含html标签，则标签效果会被渲染出来。
2、{{>对象的属性名}}
这种赋值方式，如果属性值里面包含html标签，则会直接输出文本，不会产生标签效果
四、 条件渲染
根据条件进行有选择的渲染；
注意在jsrender中没有else if的用法，如果需要else if，直接在else 后面加判断表达式。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="test" type="text/template">{{if isShow==true}} //条件渲染<p>{{:userName}}的年龄是{{:age}}</p>{{else}} // 注意没有else if，如果需要else if，直接在else 后面加判断表达式<p><b>{{:userName}}的年龄是{{:age}}</b></p>{{/if}}</script><script>var data = [{userName:“”, aget:18, isShow:false}, // 利用if条件渲染，将其加粗{userName:“”, aget:18, isShow:true},{userName:“”, aget:18, isShow:true},];var resData = $("#test").render(data); // 将数据与标签模板绑定$("div").append(resData); // 将绑定后的结果写入页面中console.log(resData); // 查看resData生成了什么</script></body>
</html>
五、 循环渲染
可以对数组进行循环渲染，也可以对绑定对象的数组属性或对象数组进行渲染。如果绑定对象的某个属性是数组，不使用循环渲染，数组会按字符串一次性渲染出来；使用循环渲染，数组会分几次被渲染出来。
1、 普通数组循环渲染
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="test" type="text/template"><p>{{:userName}}</p>{{for nums}} // 指定循环的是哪个成员属性<p>{{:#data}}的序号是{{:#index}}</p> // #data表示每次循环中的项，#index表示数组索引的下标；#index也可以写成{{:#getIndex()}}{{/for}}</script><script>var data = [{userName:“张三”, aget:18, num:[1,2,3,4,5,6]},{userName:“李四”, aget:15, num:[1,2,3,4,5,6]},{userName:“王五”, aget:11, num:[1,2,3,4,5,6]},];var resData = $("#test").render(data); // 将数据与标签模板绑定$("div").append(resData); // 将绑定后的结果写入页面中console.log(resData); // 查看resData生成了什么</script></body>
</html>
2、 对象循环渲染
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="test" type="text/template"><p>{{:name}}</p>{{for nums}} // 指定循环的是哪个成员属性<p>{{:#data}}的序号是{{:#index}}</p> // #data表示每次循环中的项，#index表示数组索引的下标；#index也可以写成{{:#getIndex()}}{{/for}}{{for users}}<p>{{:userName}}</p> // 此处循环调用每项数据的usesrName属性可使用{{:#data.userName}}，但可以略写为{{:usesrName}}{{/for}}</script><script>var data = [{name:"张三",isShow:true,nums:[1,2,3,4,5,6],users:[{userName:"ACE", age:18},{userName:"Taro", age:16},]},]var resData = $("#test").render(data); // 将数据与标签模板绑定$("div").append(resData); // 将绑定后的结果写入页面中console.log(resData); // 查看resData生成了什么</script></body>
</html>
3、 属性名称循环渲染
通过props包裹，可以将属性名称和属性值都进行渲染：
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="test" type="text/template"><p>{{:user.userName}}</p><p>{{:user.age}}</p>{{for user}}{{props #data}}<p>{{:key}}</p> //渲染出属性名称<p>{{:prop}}</p> //渲染出属性值{{/props}}{{/for}}</script><script>var data = [{name:"张三",isShow:true,nums:[1,2,3,4,5,6],user:{userName:"Taro", age:16}},]var resData = $("#test").render(data); // 将数据与标签模板绑定$("div").append(resData); // 将绑定后的结果写入页面中console.log(resData); // 查看resData生成了什么</script></body>
</html>
4、 循环渲染对上级属性的引用
循环渲染中的{{:#data}}始终表示最近的for循环中的子项；如果循环中需要调用上级的属性值，可以在for语句中通过~标识符进行赋值，让其在for循环中使用。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="test" type="text/template"><p>{{:name}}</p>{{for nums}}<p>{{:#data}}的序号{{:#index}}，还有第二种下标号写法{{:#getIndex()}}</p>{{/for}}{{for users ~pName=name ~pIsShow=isShow}} // 将上级属性值赋值到for循环中被使用<p>{{:userName}}</p><p>{{:~pName}}的显示为{{:~pIsShow}}</p> // 使用在for语句赋值的变量，这些变量都是上级属性值{{/for}}</script><script>var data = [{name:"张三",isShow:true,nums:[1,2,3,4,5,6],users:[{userName:"ACE", age:18},{userName:"Taro", age:16},]},]var resData = $("#test").render(data); // 将数据与标签模板绑定$("div").append(resData); // 将绑定后的结果写入页面中console.log(resData); // 查看resData生成了什么</script></body>
</html>
六、 模板嵌套
在模板嵌套中，如果主模板不传入任何参数给子模板，则子模板直接接收主模板绑定的整个对象
1、for循环模板嵌套
子模板和数组数据绑定，嵌套进主模板，依次渲染若干子模板嵌套进主模板。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><!-- 主模板 --><script id="mainTemp" type="text/template"><p>this is mainTemp</p><p>{{:name}}</p>{{for arrays tmpl="#childTemp" /}} // 将绑定数据的array属性里面的数据，按每条数据一个子模板，嵌套进主模板</script><!-- 子模板 --><script id="childTemp" type="text/template"><p>this is childTemp</p><p>{{:#data}}</p></script> <script>var data ={name:"张三",arrays:[1,2,3,4,5,6]}$("div").append($("#mainTemp").render(data)); // 将绑定后的结果写入页面中</script></body>
</html>
2、if条件模板嵌套
根据绑定数据的属性判断，是否将子模板对应绑定的数据渲染进主模板
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><!-- 主模板 --><script id="mainTemp" type="text/template"><p>this is mainTemp</p><p>{{:name}}</p>// isShow是判断表达式；array name是传进子模板的参数；tmpl是调用子模板的关键字{{if isShow arrays name tmpl="#childTemp" }} {{else arrays name tmpl="#childTemp2"}}{{/if}}</script><!-- 子模板1 --><script id="childTemp1" type="text/template"><p>this is childTemp1</p><p>{{:name}} 1</p>// 如果if语句给子模板的参数为数组，在子模板中需要使用for循环进行遍历解析{{for arrays}}<p>{{:#data}}</p>{{/for}}</script> <!-- 子模板2 --><script id="childTemp2" type="text/template"><p>this is childTemp2</p><p>{{:name}} 2</p>// 如果if语句给子模板的参数为数组，在子模板中需要使用for循环进行遍历解析{{for arrays}}<p>{{:#data}}</p>{{/for}}</script> <script>var data ={name:"张三",arrays:[1,2,3,4,5,6],isShow:true}$("div").append($("#mainTemp").render(data)); // 将绑定后的结果写入页面中</script></body>
</html>
3、include模板嵌套
根据绑定数据的属性判断，是否将子模板对应绑定的数据渲染进主模板
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><!-- 主模板 --><script id="mainTemp" type="text/template"><p>this is mainTemp</p><p>{{:name}}</p>{{include arrays tmpl="#childTemp" /}} // 如果不申明传入的对象，则直接传入主模板绑定的对象data</script><!-- 子模板 --><script id="childTemp" type="text/template"><p>this is childTemp1</p>{{for}} // 由于只传入数组arrays，所以无需在for中申明被循环的对象<p>{{:#data}}</p>{{/for}}</script> <script>var data ={name:"张三",arrays:[1,2,3,4,5,6],isShow:true}$("div").append($("#mainTemp").render(data)); // 将绑定后的结果写入页面中</script></body>
</html>
七、 converters格式转换
将指定的数据，按照自定义的要求显示出来
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="mainTemp" type="text/template">{{money:price}}</script> <script>// converters格式转换，类似VUE里面的filtervar data ={price:10}$.views.converters({money:function(value){return value.toFixed(2); // js函数，指定小数点显示},addMoney:function(value){ // converters可以添加多个格式化过滤器；注意格式化过滤器直接不能相互内部调用return value+10;}})$("div").append($("#test").render(data)); // 将绑定后的结果写入页面中</script></body>
</html>
八、 helpers
将指定的数据，按照自定义的要求显示出来。与converters的区别：converters只能带入一个参数返回结果；helper可以带入2个参数返回结果。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="mainTemp" type="text/template">{{:~plus(price,count)}}</script> <script>var data ={price:10,count:6}$.views.helpers({plus(price,count){return price*count;}})$("div").append($("#test").render(data)); // 将绑定后的结果写入页面中</script></body>
</html>
九、templates模板渲染
可以在templates中实现converters和helpers的功能。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="test" type="text/template"><p>{{money:price}}</p><p>{{:～plus(price,count)}}</p></script> <script>var goods ={price:10,count:6}$.templates("testTemp",{ // testTmep是模板的名字markup:"#test", // test是模板对应的标签idconverters:{money:function(value){return value.toFixed(2);}},helpers:{plus(price,count){return price * count;}}});var reshtml = $.render.testTemp(goods); // 将数据放入模板中产生html$("div").html(reshtml);</script></body>
</html>
十、内置API
1、注册模板
1.1 字符串转模板（方法一）
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script>var data = {name:"Ace"};var myTemp = $.templates("<div>{{:name}}</div>"); //没有模板脚本，直接字符串生成模板var reshtml = myTemp.render(data);$("div").html(reshtml);</script></body>
</html>
1.2 字符串转模板（方法二）
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script>var data = {name:"Ace"};$.templates("myTemp", "<div>{{:name}}</div>"); //没有模板脚本，直接字符串生成模板var reshtml = $.render.myTemp(data);$("div").html(reshtml);</script></body>
</html>
1.3 多模板注册
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script>var data = {name:"Ace"};$.templates("myTemp1", "<div>111{{:name}}</div>"); $.templates("myTemp2", "<div>222{{:name}}</div>"); var reshtml1 = $.render.myTemp1(data);var reshtml2 = $.render.myTemp2(data);$("div").html(reshtml1).append(reshtml2);</script></body>
</html>
1.4 自定义标签
this.tagCtx可以获取所有绑定的属性和传入的参数
A. 由方法传入的自定义标签
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="test" type="text/template">{{myTag name age isSayHello=true /}} //myTag自定义标签；name age绑定属性;isSayHello传入参数</script><script>var data = {name:"Ace",age:18};$.views.tags("myTag",function(){console.log(this.tagCtx);if(this.tagCtx.props.isSayHello){return "<h3>${this.tagCtx.args[0]} say hello.</h3>";}else{return "<h3>${this.tagCtx.args[0]} say Bye.</h3>";}});$("div").append($("#test").render(data));</script></body>
</html>
B. 由模板传入的自定义标签
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="test" type="text/template">{{myTag name age isSayHello=true}} //myTag自定义标签；name age绑定属性;isSayHello传入参数<h1>hi ace!</h1><h2>{{:~tag.tagCtx.props.isSayHello}}</h2><h2>{{:~tag.tagCtx.arg[0]}}______{{:~tag.tagCtx.args[1]}}</h2>{{/myTag}}</script><script>var data = {name:"Ace",age:18};$.views.tags("myTag",{template:"<p>{{:~tag.tagCtx.content /}} //test模板里面的内容会被嵌套在这里被调用</p>"});$("div").append($("#test").render(data));</script></body>
</html>
C. 由方法和模板传入的自定义标签
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</tile><script src="lib/jquery-3.4.1.min.js"></script><script src="lib/jsrender.min.js"></script></head><body><div></div><script id="test" type="text/template">{{myTag name age isSayHello=true /}} //myTag自定义标签；name age绑定属性;isSayHello传入参数</script><script>var data = {name:"Ace",age:18};$.views.tags("myTag",{render:function(){// 对模板中传入的参数做判断if(this.tagCtx.props,isSayHello){return "<h3>${this.tagCtx.args[0]} say hello.</h3>";}else{// this.tagCtx.render()调用template属性，传入对象{aceSay:"Hello Monster"}，此处返回的字符串是:<h2>Hello Monster </h2> <h3> hahaha </h3>return this.tagCtx.render({aceSay:"Hello Monster"}) + " <h3> hahaha </h3>";}},template:"<h2>{{:aceSay}}</h2> " // template被this.tagCtx.render()调用，获取传入的对象，将其属性aceSay值代入运算，此时aceSay的值是Hello Monster});$("div").append($("#test").render(data));</script></body>
</html>
JsRender知识点相关推荐
- jQuery模板引擎: jQuery-tmpl 和 JsRender 使用介绍
注意: jQuery官方团队已不再维护更新jQuery-tmpl ,新版用JsRender替代 JsRender知识点 https://blog.csdn.net/weixin_41703489/ar ...
- JsRender实用入门教程
这篇文章主要介绍了JsRender实用入门实例,包含了tag else使用.循环嵌套访问父级数据等知识点,并提供了完整的实例下载,非常具有实用价值,需要的朋友可以参考下 本文是一篇JsRender的实 ...
- 解释型语言与编译型的必须知识点
解释型语言与编译型的必须知识点 概念: 计算机不能理解直接理解高级语言,只能理解机器语言,所以必须把高级语言翻译成机器语言,计算机才能执行高级语言编写的程序. 翻译的方式有两种: 编译 解释 两种翻译 ...
- YOLOV4知识点分析（二）
YOLOV4知识点分析(二) 数据增强相关-mixup 论文名称:mixup: BEYOND EMPIRICAL RISK MINIMIZATION 论文地址:https://arxiv.org/ab ...
- YOLOV4知识点分析（一）
YOLOV4知识点分析(一) 简 介 yolov4论文:YOLOv4: Optimal Speed and Accuracy of Object Detection arxiv:https://arx ...
- 你需要掌握的有关.NET DateTime类型的知识点和坑位 都在这里
引言 DateTime数据类型是一个复杂的问题,复杂到足以让你在编写[将日期从Web服务器返回到浏览器]简单代码时感到困惑. ASP.NET MVC 5和 Web API 2/ASP.NETCo ...
- 简练软考知识点整理-范围确认易混概念
与确认范围容易混淆的知识点包括,确认范围与核实产品.质量控制.项目收尾,下面进行比较分析. (1)确认范围与核实产品 核实产品是针对产品是否完成,在项目(或阶段)结束时由发起人或客户来验证,强调产品是 ...
- 朴素贝叶斯知识点概括
1. 简述 贝叶斯是典型的生成学习方法 对于给定的训练数据集,首先,基于特征条件独立假设,学习输入/输出的联合概率分布:然后,基于此模型,对于给定的输入x,根据贝叶斯定理求后验概率最大的输出y 术语说 ...
- 计算机二级函数知识,2017年全国计算机二级考试MS Office高级应用知识点：INDIRECT函数...
INDIRECT函数知识点 适用考试:全国计算机二级考试 考试科目:MS Office高级应用 科目知识点:INDIRECT函数 INDIRECT函数立即对引用进行计算,并显示其内容.当需要更改公式中 ...
最新文章
- 设计模式之备忘录模式(Memento)摘录
- 比特币现金诞生一周年，BCH的未来在哪？
- 【PM模块】预防性维护（下）
- 从淘特升级，看电商特别模式的特别价值
- PHP基础知识（三）
- 幂法的c语言程序例子,数值分析之幂法及反幂法C语言程序实例.doc
- 事务隔离级别，看这一篇就够了
- Druid 在spring中的配置
- [密码学基础][每个信息安全博士生应该知道的52件事][Bristol52]42蒙哥马利乘法，哪里泄漏侧信道路吗?
- C#中如何创建文件夹，复制文件夹，删除文件夹的方法
- Response.End()在Webform和ASP.NET MVC下的表现差异
- 拆散组合思路求解期望，方差
- sql插入多条记录_如何在SQL中插入多条记录
- 构建KEGG pathway、Entrez ID、Ensemble ID的对应关系
- clock()、time()、clock_gettime()和gettimeofday()函数的用法和区别【转】
- 深度学习去燥学习编码_有关自己学习编码的最困难的事情以及如何解决它们
- 排线颜色及排序视觉检测系统
- xsd文件 -- 伤痛
- 如何在同一台服务器上绑定多个域名？
- 会计学 - 会计账户与复式记账