JsRender (js模板引擎)
最近学习了一下Jsrender模板渲染工具,非常不错,功能比较强大,官网说他是“简单直观 功能强大 可扩展的 快如闪电”确实如此。总结一下!!
jsRender 三个最重要的概念:模板、容器和数据。 最重要的是:view(视图) 是我们定义的模板,上下文是视图所用的对象。
一、基础。
{{:}} 和 {{>}}(或{{html:}})两者都可以输出内容,不过后者是经过html编码的。
{{: pathOrExpr}} (value) 值类型
{{> pathOrExpr}} (HTML-encoded value) html编码后的值
{{* mycode}} (using code) 代码
二、逻辑判断和循环。
if-else
语法:{{if condition}} ... {else condition} ... {{else}}... {{/if}}
例子:
<script type="text/tmp" id="tmp4">
<p>my name is: {{:name}}</p>
<p>我是:
{{if info.age >= 18}}
成年人
{{else}}
未成年
{{/if}}
</p>
</script>
var html = $("#tmp4").render(data);
$("#list").html(html);
for
语法: {{for}} ... {{/for}}
例子:
<script type="text/tmp" id="tmp5">
{{for}}
<li>id:{{:ID}} name:{{:Name}}</li>
{{/for}}
</script>
var arr = [
{ ID: 1, Name: "tom" },
{ ID: 2, Name: "jack" },
{ ID: 3, Name: "lucy"}
];
var html = $("#tmp5").render(arr);
$("#list").html(html);
嵌套for
语法:语法:{{for}}...{{for 当前上下文}} ... {{/for}} ... {{/for}}
例子:
<script type="text/tmp" id="tmp7">
{{for}}
<li>
name:{{:name}}
<ul>
{{for hobbies}}
<li>{{:#getIndex() + 1}}:{{:#data}}</li>
{{/for}}
</ul>
</li>
{{/for}}
</script>
arr = [
{ name: "tom", hobbies: ["篮球", "足球"] },
{ name: "jack", hobbies: ["篮球", "橄榄球"] },
{ name: "lucy", hobbies: ["游泳", "羽毛球"] }
];
var html = $("#tmp7").render(arr);
$("#list").html(html);
分离for
语法:{{for 上下文 tmpl="模板id" /}}
如果for的逻辑比较复杂,嵌套的for就会让我们的模板变得复杂,维护难度加大;我们可以将for分离,以上面的例子,可以将for放到一个新的模板,然后通过 tmpl属性指定。
例子:
<script type="text/tmp" id="tmp8">
{{for}}
<li>
name:{{:name}}
<ul>
{{for hobbies tmpl="#tmp9" /}}
</ul>
</li>
{{/for}}
</script>
<script type="text/tmp" id="tmp9">
<li>{{:#getIndex() + 1}}:{{:#data}}</li>
</script>
var html = $("#tmp8").render(arr);
$("#list").html(html);
嵌套循环使用参数访问父级数据,直接看例子:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套循环使用参数访问父级数据</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th >序号</th>
<th >姓名</th>
<th>年龄</th>
<th >家庭成员</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/Jsrender.js"></script>
<script id="testTmpl" type="text/x-jsrender">
<tr>
<td>{{:#index + 1}}</td>
<td>{{:name}}</td>
<td>{{:age}}</td>
<td>
{{!-- 使用for循环时,可以在后边添加参数,参数必须以~开头,多个参数用空格分隔 --}}
{{!-- 通过参数,我们缓存了父级的数据,在子循环中通过访问参数,就可以间接访问父级数据 --}}
{{for family ~parentIndex=#index ~parentName=name ~parnetAge=age}}
<b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>
{{!-- #data相当于this --}}
{{:~parentName}}的{{:#data}}{{:~parnetAge}}
{{/for}}
</td>
</tr>
</script>
<script>
var dataSrouce =
[
{
name: "张三",
age:3,
family: ["爸爸", "妈妈", "哥哥"]
},
{
name: "李四",
age:4,
family: ["爷爷","奶奶","叔叔" ]
}
];
$("#list").append($("#testTmpl").render(dataSrouce));
</script>
</body>
</html>
三、扩展应用
上面的基本用法已经可以满足大部分需求了。以下几个扩展都是为了分离视图和逻辑的,试想一下,如果我们的视图里还需要大量的逻辑判断或计算,全都写在一起,那会非常麻烦和难以维护。视图最好就是简单的标签,而逻辑都写在js里。jsRender是在视图上进行扩展的。
组合模板: include 组合模板
语法:include tmpl="模板id"
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>include 组合模板</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/Jsrender.js"></script>
</head>
<body>
<p>{{include tmpl=... /}} 标签用于组合模板(template composition) -----用于在一个模板中引入另一个模板,并用上下文的数据来渲染template。</p> <script id="peopleTemplate" type="text/x-jsrender">
<div>
{{:name}} lives in {{include tmpl="#addressTemplate"/}}
</div>
</script> <script id="addressTemplate" type="text/x-jsrender">
<b>{{>address.city}}</b>
</script> <div id="peopleList"></div> <script>
var people = [
{
"name": "Pete",
"address": {
"city": "Seattle"
}
},
{
"name": "Heidi",
"address": {
"city": "Sidney"
}
}
]; var html = $("#peopleTemplate").render(people); $("#peopleList").html(html);
</script> </body>
</html>
自定义标签:views.tags和 views.helpers
语法:
views.tags
1.视图 {{"标签名称" 标签参数 附加参数}}
2.逻辑 $.views.tags({"标签名称":function(参数){this.tagCtx.props.prefix附加参数}}) //prefix附加参数是你传的参数名称
views.helpers
1、视图{{~“标签名称”(附加参数)}}
2、逻辑$.views.helpers({“标签名称”:function(参数){//具体逻辑}})
因为两者基本都一样,但是views.helpers比较灵活
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两种自定义标签 views.tags和 views.helpers </title>
</head>
<body>
<p>不推荐使用 $.views.tags 这种自定义标签 建议使用$.views.helpers </p> <div>
<p>views.tags</p>
<table>
<thead>
<tr>
<th width="50%">名称</th>
<th width="50%">单价</th>
</tr>
</thead>
<tbody id="list">
<!-- 定义JsRender模版 -->
<script id="testTmpl" type="text/x-jsrender">
<tr>
<td>{{:name}}</td>
<td>
{{!-- isShow为自定义标签,price是传入的参数,status是附加属性 --}}
{{isShow price age=0}}
{{:price}}
{{else price age=1}}
--
{{/isShow}}
</td>
</tr>
</script> </tbody>
</table>
</div>
<br/><br/>
<br/><br/> <div id="div2">
<p>views.helpers</p>
<table>
<thead>
<tr>
<th width="50%">名称</th>
<th width="50%">单价</th>
</tr>
</thead>
<tbody id="list2">
<script id="testTmpl2" type="text/x-jsrender">
<tr>
<td>{{:name}}</td>
<td>
{{!-- 利用原生的if做分支跳转,利用helper做逻辑处理 --}}
{{if ~isShow123(price)}}
{{:price}}
{{else}}
--
{{/if}}
</td>
</tr>
</script>
</tbody>
</table>
</div> <body>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/Jsrender.js"></script> <script>
//数据源
var dataSrouce = [{
name: "苹果",
price: 108
},{
name: "鸭梨",
price: 370
},{
name: "桃子",
price: 99
},{
name: "菠萝",
price: 371
},{
name: "橘子",
price: 153
}]; //自定义标签 $.views.tags可以自定义标签,指定自定义标签的渲染规则。它可以给一段固定格式的html块起个名称,然后通过这个名称直接调用
$.views.tags({
"isShow": function(price){
var temp=price+''.split('');
//this.tagCtx.render(val)有点像指定参数的感觉。官方说是
if(this.tagCtx.props.age === 0){
//判断价格是否为水仙花数,如果是,则显示,否则不显示
if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){
return "<p><em style='color: red'>"+this.tagCtxs[0].render()+"</em></p>";
}else{
return this.tagCtxs[1].render();
}
}else{
return "";
} }
}); $.views.helpers({
"isShow123": function(price){
var temp=price+''.split('');
if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){
return true;
}else{
return false;
}
}
}); //views.tags渲染数据
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html); //vies.helpers渲染数据
var html2 = $("#testTmpl2").render(dataSrouce);
$("#list2").append(html2);
</script> </body>
</html>
转换器 converter
转换器可以对输出结果进行处理,例如大小写转换等。
语法:
1. 视图 {{"转化器名称":参数}}
2. js $.views.converters({"转换器名称":function(参数){...}})
<script type="text/tmp" id="tmp11">
{{for}}
<li>
Upper Name: {{toUpper:#parent.data.name}}
</li>
{{/for}}
</script>
$.views.converters({
"toUpper":function(name){
if(name){
return name.toUpperCase();
}
}
})
var html = $("#tmp11").render(arr);
$("#list").html(html)
嗯,再次介绍一个比较好的例子网站:http://borismoore.github.io/jsrender/demos/demos.html,最好是参考官网:www.jsviews.com
JsRender (js模板引擎)的更多相关文章
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
- 掌握js模板引擎
最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...
- js模板引擎
js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...
- 调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- Filter - Surge.js模板引擎过滤器
版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...
- js模板引擎--artTemplate
js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...
随机推荐
- Ubuntu系统下同时打开多个终端窗口的软件
sudo apt-get install Terminator
- Spring RestTemplate GET 请求参数
@Test public void testUpdateProfitJson_GET_Params() throws BusinessException { String apiURL="U ...
- <Win7硬件故障分析>
查看当前系统正在运行的硬件信息. 右击计算机——属性——设备管理器看到下面: 一些常见的硬件故障: 主板故障 >开机不正常,偶尔出现突然的断电现象 >明明自己选择了关机,但是还是无法关机或 ...
- mysql数据库的数据变更事件获取以及相关数据
https://medium.com/@Masutangu/udf-trigger%E5%AE%9E%E6%97%B6%E7%9B%91%E6%8E%A7mysql%E6%95%B0%E6%8D%AE ...
- Struts2初级篇(HelloWorld)
Struts2的工作流程: 从一个高水平角度看,Struts2 是一个MVC拉动的(或MVC2)框架,Struts2 的模型-视图-控制器模式是通过以下五个核心部分进行实现的: 操作(Actions) ...
- vc++ 6.0编译后生成的文件
程序在编译后,在目标路径下会生成多个文件 Debug文件夹(*.exe,*.ilk,*.obj,*.pch,*.pdb,*.idb,*,pdb),*.cpp,*.dsp,*.ncb,*.plg ...
- 360 so动态脱壳
环境及工具 手机 : 中兴 U887 系统版本: Android 2.3.5 工具 : IDA pro 6.6 .0101Editor 版权声明:未经许可,随便转载 目前so加壳有 ...
- Linux命令行环境与桌面环境护切换
1.前言 在大部分情况下,我们在使用Linux时习惯使用命令行环境,但是有时候也还是会使用到安装桌面环境,所以在这里介绍一下如何给没有安装桌面环境的系统安装桌面环境.以Centos 6.5 为例演示一 ...
- 模块详解及import本质
一.模块的定义 用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能) 本质就是.py结尾的Python文件(文件名test.py,对应的模块名:test) 包:用来从逻辑上组织模块的 ...
- 禁止ASP.NET MVC模型绑定时将空字符串绑定为null
为model添加[DisplayFormat(ConvertEmptyStringToNull = false)] [Display(ResourceType = typeof(AppStrings) ...