先贴一下API地址:http://www.jsviews.com/#jsrapi
再贴一下源码地址:https://github.com/BorisMoore/jsrender
在线演示地址:http://borismoore.github.io/jsviews/demos/index.html
一、简单使用
1、先引用jquery和jsrender.js
2、要渲染的模板写成这样:
<script id="movieTemplate" type="text/x-jsrender">
<div>
{{:#index+1}}: <b>{{>name}}</b> ({{>releaseYear}})
</div>
</script>
3、在页面中被渲染的目标地址:
<div id="movieList"></div>
4、获取数据(这里先写死了):
var movies = [
{ name: "The Red Violin", releaseYear: "1998" },
{ name: "Eyes Wide Shut", releaseYear: "1999" },
{ name: "The Inheritance", releaseYear: "1976" }
];
5、渲染:
$( "#movieList" ).html(
$( "#movieTemplate" ).render( movies )
);
效果:
二、converters的使用
conveters是处理和格式化值类型的方法。
比如:
{{html:movie.description}} - html编码
{{url:getTheFilePath()}} - url编码
{{daymonth:invoice.date}} - 使用自定义的formatter
自定义的formatter使用方法如下:
1、先注册converters getRsbPointStr:
$.views.converters("getRsbPointStr", function (responsiblePointList) {
var rspsbPointName = "";
for (var index in responsiblePointList) {
rspsbPointName += responsiblePointList[index].PointName;
rspsbPointName += ",";
}
if (rspsbPointName.length > 1) {
rspsbPointName = rspsbPointName.substr(0, rspsbPointName.length - 1);
}
return rspsbPointName;
});
2、页面中使用
<td>{{getRsbPointStr:responsiblePointList}}</td>
三、条件判断
{{if nickname}}
Nickname: {{:nickname}}
{{else}}
No nickname...
{{/if}}
当然if后面是可以跟表达式的,比如{{if sore>80}}
<h4>{{:title}}</h4>
{{if members && members.length}}
<ul>
{{for members}}
<li>{{:name}}</li>
{{/for}}
</ul>
{{else standby && standby.length}}
Standby only:
<ul>
{{for standby}}
<li>{{:name}}</li>
{{/for}}
</ul>
{{else}}
No members!
{{/if}}
渲染:
var data = [
{
"title": "The A team",
"members": [
{
"name": "Pete"
},
{
"name": "Heidi"
}
],
"standby": [
{
"name": "Xavier"
}
]
},
{
"title": "The B team",
"members": [],
"standby": [
{
"name": "Robert"
},
{
"name": "Adriana"
}
]
},
{
"title": "The C team",
"standby": []
}
];
var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
结果:
四、$.views.tags()
$.views.tags可以自定义标签,指定自定义标签的渲染规则。它可以给一段固定格式的html块起个名称,然后通过这个名称直接调用
使用方法:
{{mytag ...}} ... {{/mytag}}
比如:
1、先注册一个名称为:boldp 的标签,作用是将内容用<b>和<p>标签包起来
function renderBoldP(value) {
return "<p><b>" + value + "</b></p>";
}
$.views.tags("boldp", renderBoldP);
2、页面中直接使用自定义标签名称:{{boldp .. ./}}或者{{boldp}} ... {{/boldp}}
<div id="team"></div>
<script id="teamTemplate" type="text/x-jsrender">
This is the title:{{boldp title /}}
</script>
3、加载数据渲染
var team = {
title: "The A Team"
};
var html = $("#teamTemplate").render(team);
$("#team").html(html);
4、我们来看结果:
5、大功告成?NO,上面的方法看似简单,但是如果想在使用的时候在自定义标签里添加其它html内容,上面展示的方法就不适用了。
比如我想要我的自定义标签这样使用:
{{boldp}}
我想在这里可以自由输入一些标签:<br/>
<em>{{:title}}</em>
{{/boldp}}
注意观察,这次使用的时候自定义标签内部多了一些html。如何解决这种情况呢?jsrender提供了
this.tagCtx.render(val)方法。当然还有其它方法(this.tagCtx.args, this.tagCtx.props, this.tagCtx.view.data等)以后再研究。简单理解,this.tagCtx.render(val)就是只渲染变量部分。
用法,只需修改renderBoldP函数,不是简单的加:
function renderBoldP(val) {
return "<p><b>" + this.tagCtx.render(val) + "</b></p>";
}
再来看效果:
6、更高级的用法,使用 this.tagCtx.props 可以在渲染时指定参数,然后在你的tag渲染函数中处理。
比如我在渲染自定义标签range时,添加了start和end参数:
{{range members start=1 end=2}}
<li>
{{:name}}
</li>
{{/range}}
注册tag的方法可以直接使用:this.tagCtx.props.start和this.tagCtx.props.end访问到这两个值。
比如下面的注册,只渲染 menbers数组下标为1到2之间的数据:
$.views.tags("range", function(array) {
var ret = "",
start = this.tagCtx.props.start,
end = this.tagCtx.props.end;
for (var i = start; i <= end; i++) {
// Render tag content, for this data item
ret += this.tagCtx.render(array[i]);
}
return ret;
});
如果menbers数组是这样:
members: [
{name: "Robert"},
{name: "Sarah"},
{name: "Xavier"},
{name: "Adriana"}
]
那将只渲染 Sarah和Xavier
7、上面都是使用渲染函数,下面看一下直接使用template的方法:
$.views.tags("boldp", {
template: "<p><b>{{:~tag.tagCtx.args[0]}}</b></p>"
});
直接调用 tag.tagCtx.args参数,无需再自定义函数去注册。
$.views.tags("boldp", {template: "..."});
$.views.tags("boldp", function);
五、$.views.helpers()
可以定义一些方法,在渲染的时候处理
1、注册方法 toUpperCase:
$.views.helpers({
toUpperCase: function(val) {
return val.toUpperCase();
}
});
2、调用:
<a>{{>~toUpperCase(title)}}</a>
3、贴出全部代码:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
<h3>Helper demo</h3>
<script id="aTemplate" type="text/x-jsrender">
<a>{{>~toUpperCase(title)}}</a>
</script>
<div id="content">
</div>
<script type="text/javascript">
$.views.helpers({
toUpperCase: function(val) {
return val.toUpperCase();
}
});
var data = {
title: "test1",
};
$( "#content" ).html(
$( "#aTemplate" ).render( data )
);
</script>
</body>
</html>
六、for循环
{{for pathOrExpr}}...{{/for}}
比如,数据data中addrss字段还是列表,需要循环渲染
var data = [
{
"name": "Pete",
"address": {
"city": "Seattle"
}
},
{
"name": "Heidi",
"address": {
"city": "Sidney"
}
}
];
就可以这样使用:
{{:name}} lives in
{{for address}}
<b>{{>city}}</b>
{{/for}}
for标签内部直接写字段名称即可
七、其它介绍
1、jsRender的模板标签使用Mustache style(汗,英语不好伤不起)风格。也可以自行定义分隔符,比如: <%...%>,使用$.views.settings.delimiters("<%", "%>")即可。
2、三种内置标签:
{{: pathOrExpr}} (value) 值类型
{{> pathOrExpr}} (HTML-encoded value) html编码后的值
{{* mycode}} (using code) 代码
这里在回顾一下自定义标签,比如:{{mytag /}}自定义标签是闭合的,还是稍有不同。
3、#data可以访问整个数据
比如六中的例子,{{#data}}即可拿到当前要渲染的一条data的值。比如,渲染到第一条,就得到:
{
"name": "Pete",
"address": {
"city": "Seattle"
}
},
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>
<script src="jsrender.js" type="text/javascript"></script>
</head>
<body>
<h3>Helper demo</h3>
<script id="aTemplate" type="text/x-jsrender">
<a>{{>name}}</a>
<br/>
{{for score}}
<span>数学</span> <span>{{>math}}</span>
<span>语文</span> <span>{{>chinese}}</span>
{{/for}}
<span>平均分</span><span>{{>~averageScore(#data)}}</span>
<br/>
<br/>
</script>
<div id="content">
</div>
<script type="text/javascript">
$.views.helpers({
averageScore: function(val) {
var total = 0.0;
var counter = 0;
for(var a in val.score){
total += parseFloat(val.score[a]);
counter++;
}
return total/counter;
}
});
var data = [{
"name": "zhangsan",
"score":{
"math":"95",
"chinese":"92",
}
},
{
"name": "lisi",
"score":{
"math":"72",
"chinese":"98",
}
}];
$( "#content" ).html(
$( "#aTemplate" ).render( data )
);
</script>
</body>
</html>
结果: