当前位置: 首页 > 工具软件 > jsrender > 使用案例 >

JsRender知识点

沈博达
2023-12-01

一、 引用

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里面的filter
			var 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是模板对应的标签id
				converters:{
					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>
 类似资料: