JsRender前端渲染模板基础学习
JsRender前端渲染模板
使⽤模板，可以预先⾃定义⼀些固定格式的HTML标签，在需要显⽰数据时，再传⼊真实数据组装并展⽰在Web页中；避免了在JS中通过“+”等⼿动分割、连接字符串的复杂过程；针对⾼性能和纯字符串渲染进⾏了优化；⽆需依赖DOM和jQuery；
优先使⽤场景：元素重复出现；动态加载数据，并前端显⽰；
JsRender使⽤
1. 引⼊js
2. 定义模板
3. 准备好要显⽰的数据 json对象
4. 编译成元素：ElementById(“XXX”).render(data); 或 $("#XXX").render(data);
5. 通过容器元素的append、before、after显⽰
⼀、基本语法
原始赋值： {{：属性名}}，显⽰原始数据
转码赋值： {{>属性名}}，显⽰HTML编码后的数据，让数据原样输出
控制语句可嵌套使⽤：
判断： {{if 表达式}} … {{else}} … {{/if}}
循环： {{for 数组}} … {{/for}}
其它进阶
模板嵌套，使⽤：{{for tmpl="#另⼀个模板" /}}
转换器 $.verters()定义，使⽤：{{func：属性名}}
帮助⽅法 $.views.helpers()定义，使⽤：{{if ~func(arg1, arg2, ...)}}
⾃定义标签 $.views.tags()
基本变量标签 {{:name}}
基本变量需要使⽤冒号 ":" 作为标识，⼀般是简单对象的某个属性。⽐如传⼊⼀个简单对象data
引⼊jquery-3.2.1.min.js 和 jsrender.min.js
<script src="/Scripts/jquery-3.2.1.min.js"></script>
<script src="/Content/jsrender.min.js"></script>
<body>
<div id="result"></div>
<script type="text/x-jsrender" id="Tmpl">
<p>Name: {{:name}}</p>
<p>Age: {{:age}}</p>
</script>
<script>
var data = {
'name': 'van',
'age': 18
}
var html2 = $("#Tmpl").render(data);
$("#result").append(html2);
</script>
</body>
传⼊⼀个多层级对象data
<div id="result"></div>
<script type="text/x-jsrender" id="Tmpl">
<p>Name: {{:Info.name}}</p>
<p>Age: {{:Info.age}}</p>
<p>{{:Details.Address}}</p>
<p>{{:Details.Hobby.TableTennis}}</p>
</script>
<script>
var data = {
'Info': {
'name': 'van',
'age': 18
},
'Details': {
'Hobby': {
'TableTennis': 'I like Table Tennis',
'Basketball': 'I like Basketball'
},
'Address': 'My address'
}
}
var html2 = $("#Tmpl").render(data);
$("#result").append(html2);
</script>
View Code
如上所见，不管传⼊的对象有多复杂，都能按照层级去到属性，只是把最外层的对象名 data 省略掉了
启⽤与定义全局变量的标签{{*}}与 {{*:}}
{{*count = 1}}
<p>{{*:count + 2}}</p>
$.views.settings.allowCode(true);
⾸先需要执⾏$.views.settings.allowCode(true);，把设置开启，然后使⽤{{*count = 1}}定义⼀个变量，然后再⽤{{*:count}}引⽤变量。当然，jsrender也提供了只有某⼀个模板⽀持全局变量的设置⽅式
var tmpl = $.templates({
markup: "#myTemplate",
allowCode: true
});
注释标签 {{!--    --}}
<p>{{!--:Details.Address--}}</p>
条件判断语句 {{if condition}} ... {else condition} ... {{else}}... {{/if}}
jsrender 的 if else 语法跟正常的代码逻辑还是有点区别的，当只有两种情况的时候，是没有区别的，就是 if else
<body>
js获取json的key和value<div id="result"></div>
<script type="text/x-jsrender" id="tmp">
<p>姓名: {{:name}}</p>
<p>
我是：
{{if info.age >= 18}}
成年⼈
{{else}}
未成年
{{/if}}
</p>
</script>
<script>
var data = {
"name": "van",
info: {
"age": 22
}
};
var html = $("#tmp").render(data);
$("#result").html(html);
</script>
</body>
但是当有多种情况的时候，也就是 if ... else if ... else if ... else 的时候，可是jsrender并没有 else if 这样的写法，它会根据情况来判断，如果是多重情况，它会⾃动把 else 当做 else if来使⽤
<script type="text/x-jsrender" id="tmp">
<p>姓名: {{:name}}</p>
<p>
{{if info.age >= 18}}
⼤于18岁
{{else info.age >= 16&&info.age < 18}}
⼤于16岁⼩于18岁
{{else}}
未成年
{{/if}}
</p>
</script>
if  else 除了以 {{if}}....{{/if}} 的形式使⽤，也可以使⽤ {{if xxx=true ... /}} ⾃闭合的形式，⽽且还可以引⼊模板，也可以混着⽤
<script type="text/x-jsrender" id="tmp">
<p>姓名: {{:name}}</p>
<p>
{{if info.age >= 18 tmpl="#tmp2" /}}
{{if name=="van"}}
帅～
{{else}}
依旧帅～
{{/if}}
</p>
</script>
<script type="text/x-jsrender" id="tmp2">
<h3>⼤于18岁</h3>
</script>
使⽤  {{for}} ... {{/for}} 循环对数据进⾏循环或对对象进⾏遍历
jsrender的for循环会默认把数组或对象的第⼀层循环遍历掉，我们只要管⾥⾯的数据就⾏了，⽽且使⽤了循环之后的模板也可以单独写成⼀个模板，在for循环中引⽤，循环数组的时候可以使⽤ {{:#index}} 来获取当前数组的下标，并且index是从0开始的，提醒：尽量使
⽤#getIndex()获取索引，避免使⽤#index，除⾮你的应⽤⾜够简单。
<div id="result"></div>
<script type="text/x-jsrender" id="tmp">
{{!-- data 对象已经被默认遍历，所以属性前不⽤加 data. 就可访问到 --}}
<h3>there have {{:kind}} kinds animal</h3>
<p>and the cow price is {{:w}}</p>
<p>and the cow price is {{:price.pig}}</p>
{{!-- 也可以这样对对象进⾏for循环 --}}
{{for price}}
<p>and the cow price is {{:cow}}</p>
<p>and the cow price is {{:pig}}</p>
{{/for}}
<ul>
{{!-- 对对象数组进⾏循环 --}}
{{for list}}
<li>{{:#getIndex() + 1}}. this animal call {{:name}}, and has {{:count}}, it has {{:foot}} foots</li>
{{/for}}
{{!-- 也可以使⽤模板引⼊作为循环的模板 --}}
{{for list tmpl="#tmp2" /}}
</ul>
</script>
<script type="text/x-jsrender" id="tmp2">
<li>{{:#getIndex() + 1}}. this animal call {{:name}}, and has {{:count}}, it has {{:foot}} foots</li>
</script>
<script>
var data = {
'kind': 4,
'price': {
'cow': 19999,
'pig': 1888
},
'list': [
{
'name': 'cow',
'count': 4,
'foot': 4
},
{
'name': 'chicken',
'count': 5,
'foot': 2
}
]
}
var html = $("#tmp").render(data);
$("#result").html(html);
</script>
嵌套for
<div id="result"></div>
<script type="text/x-jsrender" id="tmp">
{{for}}
<li>
Name:{{:name}}
<ul>
{{for hobbies}}
<li>{{:#getIndex() + 1}}-{{:#data}}</li>
{{/for}}
</ul>
</li>
{{/for}}
</script>
<script>
var data = [
{ name: "tom", hobbies: ["篮球", "⾜球"] },
{ name: "jack", hobbies: ["篮球", "橄榄球"] },
{ name: "lucy", hobbies: ["游泳", "⽻⽑球"] }
];
var html = $("#tmp").render(data);
$("#result").html(html);
</script>
嵌套循环使⽤参数访问⽗级数据
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>家庭成员</th>
</tr>
</thead>
<tbody id="result"></tbody>
</table>
<script type="text/x-jsrender" id="tmp">
{{for}}
<tr>
<td>
{{:#getIndex() + 1}}
</td>
<td>{{:name}}</td>
<td>{{:age}}</td>
<td>
{{!-- 使⽤for循环时，可以在后边添加参数，参数必须以~开头，多个参数⽤空格分隔 --}}
{{!-- 通过参数，我们缓存了⽗级的数据，在⼦循环中访问参数，就可以间接访问⽗级数据 --}}
{{for family ~parentIndex=#getIndex() ~parentName=name ~parnetAge=age}}
<b>{{:~parentIndex + 1}}.{{:#getIndex() + 1}}</b>
{{!-- #data相当于this --}}
{{:~parentName}}的{{:#data}}
{{/for}}
</td>
</tr>
{{/for}}
</script>
<script>
var data = [
{
name: "张三",
age: 3,
family: ["爸爸", "妈妈", "哥哥"]
},
{
name: "李四",
age: 4,
family: ["爷爷", "奶奶", "叔叔"]
}
]
;
var html = $("#tmp").render(data);
$("#result").html(html);
</script>
当循环数组或者遍历对象的时候，如果在 {{for}} {{/for}} 中间加上 {{else}}，还可以对遍历的对象进⾏判断，如果该对象或者属性不存在，那么就显⽰其他的内容。
{{!-- 遍历的时候顺便判断merbers是否存在 --}}
{{for members}}
<div>{{:name}}</div>
{{else}}
<div>No members!</div>
{{/for}}
使⽤ {{props}} 遍历对象并且获取到对象的key/value
当我们遍历对象需要使⽤到对象的key值时，使⽤props可以获取到key/value值，⽽且也可以在for循环中进⾏对象的遍历，在数据循环中获取可以使⽤#data获取到当前的对象，当然也可以使⽤引⼊外部模板来当做循环模板。
<div id="result"></div>
<script type="text/x-jsrender" id="tmp">
{{!-- 简单的对象遍历 --}}
{{props price}}
<p>the {{:key}} price is {{:prop}}</p>
{{/props}}
<ul>
{{!-- 在数据循环中再进⾏对象的遍历，病获取到key/prop --}}
{{for list}}
<li>
{{:#index + 1}}.
{{props #data}}
<b>{{:key}}</b> is {{>prop}}
{{/props}}
</li>
{{/for}}
{{!-- 也可以使⽤模板引⼊作为循环的模板 --}}
{{for list tmpl="#tmp2" /}}
</ul>
</script>
<script type="text/x-jsrender" id="tmp2">
<li>
{{:#index + 1}}.
{{props #data}}
<b>{{:key}}</b> is {{>prop}}
{{/props}}
</li>
</script>
<script>
var data = {
'kind': 4,
'price': {
'cow': 19999,
'pig': 1888
},
'list': [
{
'name': 'cow',
'count': 4,
'foot': 4
},
{
'name': 'chicken',
'count': 5,
'foot': 2
}
]
}
var html = $("#tmp").render(data);
$("#result").html(html);
</script>
当然，也可以在prop遍历对象的时候对对象进⾏判断，只要在prop遍历中加⼊ {{else}}，如果对象为undefined或对象为空，那么就执⾏else
{{props address}}
<b>{{:key}}:</b>{{:prop}} <br />
{{else}}
The address is blank (no properties)!
{{/props}}
使⽤ {{include}} 引⼊外部模板或者改变模板的上下⽂
虽然我们可以在 {{for}} 循环中或者 {{if}} 标签中直接引⼊模板，但是 {{include}} 引⼊模板才是符合我们认知的，应该什么标签⼲什么事
<script type="text/x-jsrender" id="tmp">
{{if case == 1}}
{{include tmpl="#tmp1" /}}
{{else case == 2}}
{{include tmpl="#tmp2" /}}
{{else}}
<p>no data</p>
{{/if}}
</script>
使⽤{{include}}标签引⼊模板显得⽐较语义化，虽然并没有什么差别。除了引⼊模板，{{include}}还可以在引⼊模板的同时引⼊对象或者数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。