一、jsrender
jsrender 是下一代的 jQuery 模板,专为高性能的纯字符串渲染而优化,无需 DOM 和其他 jQuery 依赖。
在JsRender中,是通过调用方法render()来渲染模板的。换句话说,就是在Html文件中使用java script来输出html模板的内容。
二、下载最新的jsrender.js和jsrender.min.js官方文档下载:http://www.jsviews.com/#download
jquery下载地址: http://jquery.com/download/
注意:引用js包的时候注意js的执行顺序,因为jsrender是基于jquery的,应先引用jquery,在引用jsrender,先后顺序错误会导致写的js模板不生效。
<script src="../js/jquery-2.1.4.js"></script>
<script src="../js/jsrender.js"></script>
三、JsRender模板(Template)
基本的jsRender标签:JsRender模板主要由html标记和jsrender标签(像{{:XXX}})组成。所有的Jsrender标签都被两个大括号包裹,中间既可以是参数也可以使表达式(如:{{:#index}}和{{:#index+1}}),下面看一下一些基本的Jsrender标签。
标签:
描述 | 例子 | 输出 |
参数a的值(未被Html编码) | {{:a}} | xxxxx |
参数a的属性--b的值(未被html编码) | {{:a.b}} | xxxxx |
比较(表达式,未被html编码) | {{:a.b< 2000}} | true/false |
经html编码的值(更加安全,但是要耗点内存) | {{>a.b}} | Star Wars: Episode VI: <span style='color:purple;font-style: italic;'>Return of the Jedi</span> |
经html编码的值 | {{html:a.b}} | Star Wars: Episode VI: <span style='color:purple;font-style: italic;'>Return of the Jedi</span> |
条件表达式
表达式 | 举例 | 注释 |
|| | {{ :a || b }} | 或 |
&& | {{ :a && b }} | 且 |
! | {{ :!a }} | 非 |
<= 和>=和 <和 > | {{ :a <= b }} | 比较 |
=== 和 !== | {{ :a === b }} | 等于和不等于 |
推荐比较好的博客地址:
http://josh-persistence.iteye.com/blog/1914697
http://www.jb51.net/article/59150.htm