JsRender模板

最新推荐文章于 2020-10-29 23:10:20 发布

weixin_34197488

最新推荐文章于 2020-10-29 23:10:20 发布

阅读量95

点赞数

原文链接：https://my.oschina.net/luyaolove/blog/486749

版权

一、jsrender

jsrender 是下一代的 jQuery 模板，专为高性能的纯字符串渲染而优化，无需 DOM 和其他 jQuery 依赖。

在JsRender中，是通过调用方法render()来渲染模板的。换句话说，就是在Html文件中使用java script来输出html模板的内容。

二、下载最新的jsrender.js和jsrender.min.js官方文档下载：http://www.jsviews.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>

条件表达式