1、什么是jsrender

一个JavaScript库，允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库，它具有无代码标记语法和高性能，不依赖于jQuery，也不依赖于文档对象模型（DOM），支持创建自定义函数并使用纯粹的基于字符串的渲染。

更详细的学习资料可参考专栏：https://msdn.microsoft.com/en-au/magazine/hh882454.aspx

官网地址：http://www.jsviews.com/#home

2、基本语法

原始赋值： {{:属性名}}，显示原始数据
转码赋值： {{>属性名}}，显示HTML编码后的数据，让数据原样输出
控制语句可嵌套使用：
- 判断： {{if 表达式}} … {{else}} … {{/if}}
- 循环： {{for 数组}} … {{/for}}
其它进阶
- 模板嵌套，使用：{{for tmpl="#另一个模板" /}}
- 转换器 $.views.converters()定义，使用：{{func:属性名}}
- 帮助方法 $.views.helpers()定义，使用：{{if ~func(arg1, arg2, ...)}}
- 自定义标签 $.views.tags()

2.1 基本变量标签 {{:属性名}}

基本变量需要使用冒号 ":" 作为标识，一般是简单对象的某个属性。比如传入一个简单对象data,先看官网的说明（谷歌翻译后的中文说明）

示例：


//在html页面中添加模板
<script type="text/x-jsrender" id="table"><table><tr> <td>Name: {{:user_name}}</td> <td>Age: {{:user_id}}</td></tr> </table>
</script> <script>
//逻辑
$(function() {
//传入一个简单对象 var data = { 'user_name': 'henry', 'user_id': 30 },
//获取模板 var tmpl = $.templates("#table"); // Get compiled template
//模板与数据结合       var html = tmpl.render(eval(data)); // Render template using
});
</script> <script src="${base}/statics/js/operation_v1.1/lib/jsrender.min.js"></script>

2.2 基本变量标签 {{>属性名}}

{{:}} 和 {{>}}(或{{html:}})两者都可以输出内容，不过后者是经过html编码的。　　

2.3 逻辑判断和循环。

<1> if-else

　　语法：{{if condition}} ... {else condition} ... {{else}}... {{/if}}

示例：

<td>
{{if result== "true"}}<a><span >right</span></a>
{{else}}<a><span >wrong</span></a>
{{/if}}
</td>{{if status == 1}}<td>启用</td>
{{else}}<td>禁用</td>
{{/if}}

如果判断条件简单，可直接用三元运算，这样更简洁高效

<td><a><span >result== "true"？right：wrong</span></a>
</td>{{:index_status == 1?"启用":"禁用"}}

注： {{if result }} 该判断条件在 result不存在、result等于NULL或空字符串时不成立。

<2> 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);

<3> 嵌套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);

jsrender的基本使用相关推荐

有了jsRender，妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了...
写在前面说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到 ...
JsRender (js模板引擎)
最近学习了一下Jsrender模板渲染工具,非常不错,功能比较强大,官网说他是"简单直观功能强大可扩展的快如闪电"确实如此.总结一下!! jsRender 三个最重要的概念: ...
一步步完成jsRender + Spring MVC + Nginx前后端分离示例
2019独角兽企业重金招聘Python工程师标准>>> 本篇博文的目标是使用前端页面渲染插件jsRender做前后端分离,后端采用Spring MVC给出REST API,并结合Ng ...
JsRender 前端渲染模板常用API学习
JsRender 常用API 1. $.templates() $.templates()方法是用来注册或编译模板的,使用的情况有以下几种. 把html字符串编译编译成模板获取使用script标签声 ...
用MVC做可拖拽的留言板，利用 Jquery模板 -- JsRender
本文主要记录 JsRender模板的使用表结构界面样式让div可拖拽数据绑定使用模板 JsRender Controller代码先看看效果图,演示地址:http://www.5imvc. ...
MVVM js 库JsRender/JsViews和knockoutjs介绍
MVVM概念 MVVM的解释有很多,抛开抽象的描叙我想最实用的一点是把UI和数据绑定,事件做成了一种静态契约,也就是模版,同时UI和数据可以独立动态变化.WPF,SL相对Winfrom和asp.net ...
下一代Jquery模板-----JsRender
在ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender中提到了JsRender.JsRedner和JsViews(JsViews是再JsRender基础 ...
javascript模板库jsrender加载并缓存外部模板文件
前一篇说了jsrender嵌套循环的使用,在SPA的应用中,广泛使用的一个点就是view模板,使用了SPA之后,每个业务页面不再是独立的html,仅仅是一个segment,所以通常这些segment会 ...
Jsrender初体验
支持一个活动,在以往项目基础上修修改改,通过这类小微项目快速熟悉开发.测试以及部署环境. 前端页面中看到了一段Js代码,从语法结构上看有点像模板引擎,最后确认是一个基于jquery的模板引擎-JsRe ...
JsRender前端渲染模板-jquery方法失效
在使用JsRender前端渲染模板的元素,在对这些元素进行jquery的方法,则无效. 场景: 使用jsrender 循环渲染一组数据到页面,然后对每组元素点击操作,无效果. 代码如下: <sc ...

jsrender的基本使用