JsRender知识点
沈博达
一、 引用
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>
类似资料：