1.什么是JsRender：
JsRender是一款JavaScript模版引擎，是具有简单直观，功能强大，可扩展的，早期版本是基于JQUERY 写的，后来作者重构了，就不再依赖JQUERY了.
它的官方网站在 http://www.jsviews.com/#jsrender。 英文好的可以参考官方文档和示列。 在Visor中，可以定义JsRender模板，然后通过设计的ER 对象和Entity 对象数据生成相应的SQL 和 Entity 类文件。 Visor 具体应用不在这里累赘。大家自己可以去体验
Http://www.visor.com.cn. 下面书归正传
2.为什么需要模板
下面是一个jQuery例子：
|
var html = '';
$.each(data.persons, function (i, item) { html += "<tr><td>" + item.FirstName + "</td><td><a href='/Person/Edit/" + item.PersonID + "'>Edit</a> | <a href='/Person/Details/" + item.PersonID + "'>Details</a> | <a href='/Person/Delete/" + item.PersonID + "'>Delete</a></td></tr>"; });
$('#XXX').append(html);
|
这样写很明显的坏处就是：这样的代码可见性太低，很难维护。
再来看看JsRender的例子
//Templates <script id="peopleTemplate" type="text/x-jsrender"> <div> {{for address}} {{if show}} {{:a}}</br> {{else}} {{:b}}</br> {{/if}} {{/for}} </div> </script> //Container <div id="peopleList"></div> //Data <script> var people=[ { "name":"jose", "address":[ {"show":true,"a":"1","b":"1b"}, {"show",false,"a":"2","b":"2b"}, {"show",false,"a":"3","b":"3b"} ] } ]
//Render Data //Insert into Container var peopleTemplate=$.templates("#peopleTemplate"); var html=peopleTemplate.render(people); $("#peopleList").html(html);
|
这样的代码看起来结构清晰多了。
3.JsRender三要素
从上面JsRender的例子可以看出来，JsRender需要三要素，分别为模板（Templete），容器（Container），数据（Data）。主要行为是将数据渲染进模板（Render Data），再将渲染结果插入容器（Insert into Container）。
4.JsRender渲染模板
在JsRender中，是通过调用方法render()来渲染模板的。有以下3种方式：
- 如果已经存在一个template的对象，则可以使用template.render(...)
|
如上例 |
- 如果已经有一个通过名字注册的template，名字为("personTmpl"),则可以使用$.render.personTmpl(...)调用。
$.templates("personTmpl", "#personTemplate"); var html = $.render.personTmpl(person);
|
- 如果该template是在一个script脚本块中定义的，并且该脚本块使用selector“#myTmpl"，则同样可以使用$("# personTemplate").render(...)调用
|
<script id="personTemplate" type="text/x-jsrender"> ... </script> var html = $("#personTemplate").render(person);
|
第1和第2种方式是渲染前编译：
/*A、获取模板对象的方式编译*/
var xxxTemplate = $.templates("#xxxTemplate");//既可以是字符串也可以是脚本标记，B是字符串
var html = xxxTemplate.render(data); /*B、指定模板名称的方式编译*/
$.templates('xxx','<b>{{:name}}</b>');
$.templates({
'yyy','<b>{{:name}}</b>',
'zzz','<b>{{:name}}</b>'
})；
var html = $.render.xxx(data);//注意，第B种方式可以同时渲染多个模板，但是第A种方式不行
|
第3种方式是无需编译直接渲染：
var html = $("#XXXXX").render(data); // XXX代表某个脚本标记，也就是上面的<script id="XXX" type="text/x-jsrender">.......</script>
|
总结一下可以看出：
1、无编译直接渲染的方式无法用于字符串的渲染；渲染前编译的方式字符串和脚本标记皆可。
2、制定模板名称的方式编译可以同时编译多个模板，但是获取模板对象的方式编译只能编译一个模板
5. JsRender模板（Template）
基本的JsRender标签：JsRender 模板主要由html标记和jsrender标签（像上面的{{：XXX}}）组成。所有的Jsrender标签都被两个大括号包裹，中间既可以是参数也可以是表达式（如：{{：#index}}和{{：#index+1}}），下面看一下一些基本的Jsrender标签。
|
描述 |
例子 |
输出 |
||
|
参数firstName的值（未被Html编码） |
{{:firstName}} |
Madelyn |
||
|
参数movie的属性--releaseYear的值（未被html编码） |
{{:movie.releaseYear}} |
1987 |
||
|
比较（表达式,未被html编码） |
|
true |
||
|
经html编码的值（更加安全，但是要耗点内存） |
{{>movie.name}} |
Star Wars: Episode VI: <span style='color:purple;font-style: italic;'>Return of the Jedi</span> |
||
|
经html编码的值 |
{{html:movie.name}} |
Star Wars: Episode VI: <span style='color:purple;font-style: italic;'>Return of the Jedi</span> |
5.1 JsRender数据遍历：
{{for xxx}}
<li>{{:xxx.property }}</li>
{{/for}}
如果想获取xxx本身，可以这样写：
{{for xxx yyy}}
<li>{{:#data}}</li>
{{/for}}
上面的例子说明了两点，1、for不仅仅可以遍历一组数据，他甚至可以同时遍历两组和多组数据（强大了 吧...）。2、上面的#data就表示xxx和yyy本生。试想一下，如何xxx和yyy都表示一个基本元素（字符串、整数等等、任意交叉）的数组，那 么这个是不是能很好的完成遍历呢？说道#data，不得不提一下#index，#data和#index都是内置的JsRender关键字(#data为数据本身,#index默认值为0)。下面再看一个例 子：
5.2JsRender条件
{{if fullprice}}
html markup
{{else halfprice}}
html markup
{{else}}
html markup
{{/if}}
1、if....else....else表示了if elseif else，这里的else表示了elseif。
2、{{if fullprice}}中的fullprice条件表达式表示的是fullprice不为空。其实还可以有更懂的条件表达式可以应用到这里来，如下：
|
表达式 |
举例 |
介绍 |
|
|| |
{{ :a || b }} |
或 |
|
&& |
{{ :a && b }} |
且 |
|
! |
{{ :!a }} |
非 |
|
<= 和>=和 <和 > |
{{ :a <= b }} |
比较 |
|
=== 和 !== |
{{ :a === b }} |
等于和不等于 |
3、在条件表达式中还可以用一些属性进行比较，如{{if xxx.length > 50}}等等
5.3模板嵌套
<script type="text/x-jsrender" id="studentTemplate"> {{for #data}}
<h3>{{:name}}</h3>
<ul> {{for language tmpl="#studentLanguageTemplate" /}}
</ul> {{/for}}
</script> <script type="text/x-jsrender" id="studentLanguageTemplate"> <li> {{:#parent.parent.data.name}} is learning {{:title}}</li>
</script>
|
以上是为JsRender的模板嵌套，只需要设置{{for}}的tmpl属性即可。这时，tmpl是一个脚本标记。
如果studentLanguageTemplate已经被$.templates()编译，那么也可以这么写：
<script type="text/x-jsrender" id="studentTemplate"> {{for #data}}
<h3>{{:name}}</h3>
<ul> {{for language tmpl="studentLanguageTemplate" /}}
</ul> {{/for}}
</script> <script type="text/x-jsrender" id="studentLanguageTemplate"> <li> {{:#parent.parent.data.name}} is learning {{:title}}</li>
</script> //render $.templates("studentLanguageTemplate", "#studentLanguageTemplate");
$("#studentList").html($("#studentTemplate").render(studnets));
|
上面的templ不再“#XXX”指向一个脚本标记，而是"XXX"指向一个已经标记的脚本标记。
posted on
