jsrender for 标签
for object使用
1.为进入object中直接使用其中的属性
<div id="result"></div> <script id="theTmpl" type="text/x-jsrender">
<div>
{{:name}} lives in
{{for address}}
<b>{{>city}}</b>
{{/for}}
</div>
</script> <script>
var data = [
{
"name": "Pete",
"address": {
"city": "Seattle"
}
},
{
"name": "Heidi",
"address": {
"city": "Sidney"
}
}
]; var template = $.templates("#theTmpl"); var htmlOutput = template.render(data); $("#result").html(htmlOutput);
</script>
2.切入模版
<body> <script id="peopleTemplate" type="text/x-jsrender">
<div>
{{:name}} lives in {{for address tmpl="#addressTemplate" /}}<!--切入其他模版-->
</div>
</script> <script id="addressTemplate" type="text/x-jsrender">
<b>{{>city}}</b>
</script> <div id="result"></div> <script>
var people = [
{
"name": "Pete",
"address": {
"city": "Seattle"
}
},
{
"name": "Heidi",
"address": {
"city": "Sidney"
}
}
]; var html = $("#peopleTemplate").render(people); $("#result").html(html);
</script> </body>
2.for array的使用,为循环标签
<body> <div id="result"></div> <script id="theTmpl" type="text/x-jsrender">
<b>{{:title}}</b>
<ul>
{{for members}}
<li>{{:name}} lives in <b>{{:address.city}}</b></li>
{{/for}}
</ul>
</script> <script>
var data = {
"title": "The A team",
"members": [
{
"name": "Pete",
"address": {
"city": "Seattle"
}
},
{
"name": "Heidi",
"address": {
"city": "Sidney"
}
}
]
}; var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);
</script> </body>
3.for标签还支持else的判断
else:表示for中的没有值循环或者为空,则进入
{{for members}}
Name: {{:name}}
{{else}}
No members...
{{/for}}
Conditional blocks: — Render the block content of the {{for}} tag (or referenced template) if the object is defined and is not an empty array, otherwise render the {{else}} block (or template)
<body> <div id="result"></div> <script id="theTmpl" type="text/x-jsrender">
<b>{{:title}}</b>
<ul>
{{for members}}
<li><b>Name:</b> {{:name}}</li>
{{else}}
<li>No members!</li>
{{/for}}
</ul>
</script> <script>
var data = [
{
"title": "The A team",
"members": []
},
{
"title": "The B team",
"members": [
{
"name": "Pete"
}
]
}
]; var template = $.templates("#theTmpl"); var htmlOutput = template.render(data); $("#result").html(htmlOutput);
</script> </body>
jsrender for 标签的更多相关文章
- MVC学习笔记3 - JsRender
许多发展平台减少代码和简化维护,使用模板和 HTML5 和 JavaScript 也不例外. JsRender 是一个 JavaScript 库使您可以一次定义一个样板文件结构,并使用它来动态地生成 ...
- 前端渲染利器——JsRender入门
JsRender不少前端人员应该都用过,它是一个比较强大的模板,不牵涉太多技术依赖,使用起来非常舒服.我本人在前端开发中使用React之前,都是用的它了(实际上我感觉React没有JsViewes好用 ...
- knockoutJS学习笔记02:jsRender模板引擎
上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍另外一个模板引擎:jsRe ...
- Visro 应用的前端模板工具介绍 -JsRender
1.什么是JsRender: JsRender是一款JavaScript模版引擎,是具有简单直观,功能强大,可扩展的,早期版本是基于JQUERY 写的,后来作者重构了,就不再依赖JQUERY了. 它的 ...
- JsRender for object 语法说明
JsRender 作为一款JavaScript模版引擎,必不可少的会有循环功能,也就是for,但由于JsRender过于灵活,for竟然可以接受object作为循环对象. {{for Array}}和 ...
- JsRender实用教程(tag else使用、循环嵌套访问父级数据)
前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: · 简单直观 · 功能强大 · 可扩展的 · 快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...
- 下一代Jquery模板-----JsRender
在ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender中提到了JsRender.JsRedner和JsViews(JsViews是再JsRender基础 ...
- ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender
(原文) 昨天在ASP.NET MVC利用PagedList分页(一)的 最后一节提到,一个好的用户体验绝对不可能是点击下一页后刷新页面,所以今天来说说利用Ajax+PagedList实现无刷新(个人 ...
- JsRender
JsRender 不少前端人员应该都用过,它是一个比较强大的模板,不牵涉太多技术依赖,使用起来非常舒服.我本人在前端开发中使用React之前,都是用的它了(实际上我感觉React没有JsViewes好 ...
随机推荐
- [No00003C]操作系统Operating Systems进程同步与信号量Processes Synchronization and Semaphore
操作系统Operating Systems进程同步与信号量Processes Synchronization and Semaphore 进程合作:多进程共同完成一个任务 从纸上到实际:生产者− − ...
- 关于Ajax中http协议
关于ajaxajax是异步的JavaScript和XML,优点是无刷新的与后天通信并获取数据,只更改页面中需要更改的部分,而不是刷新整个页面,减少无意义的数据传输,提高了效率和用户体验 1.协议和HT ...
- ES5特性之Object.freeze
Object.freeze方法比Object.seal方法更严格,不仅不能扩展新对象和不可重新配置属性的特性,还不能改变对象属性的值writable(不可写)
- android edittext 去边框 去下划线
EditText的background属性设置为@null就搞定了:android:background="@null"style属性倒是可加可不加 附原文:@SlumberMac ...
- APIO2013 tasksauthor
喜闻乐见的提答题,这道题还是蛮有趣的 数据结构题写得心塞,来一道提答意思意思 如果喜欢这类题的话还可以去做做uoj83. 这题是给出了两个问题,一个最短路,一个无向图染色问题. Data 1 Floy ...
- 毫米转换为PX
公式:毫米数/25.4*你的电脑的DPI,win7 DPI 100%缩放为96,125%为120,150%为144,200%为192 象素数 / DPI = 英寸数 英寸数 * 25.4 = 毫米数
- 用Map-Reduce的思维处理数据
在很多人的眼里,Map-Reduce等于Hadoop,没有Hadoop谈Map-Reduce犹如自上谈兵,实则不然,Map-Reduce是一种计算模型,只是非常适合在并行的环境下运行,Hadoop是M ...
- [转]linux 系统监控、诊断工具之 IO wait
1.问题: 最近在做日志的实时同步,上线之前是做过单份线上日志压力测试的,消息队列和客户端.本机都没问题,但是没想到上了第二份日志之后,问题来了: 集群中的某台机器 top 看到负载巨高,集群中的机器 ...
- 为什么我们的web前端变的越来越复杂
前端发展了也有些年头了,曾记得很多年前,聊起前端,都觉得是很简单,那个时候都没有前端工程师这个职位.可现在,前端已经逆袭了,已经不是原来的样子了,各种技术层出不穷,显的越来越高深莫测了.前端真的变得那 ...
- SQLServer数据导入Mongodb
一.思路 MongoVUE免费版支持MySQL导入Mongo,所以思路是SQLServer导入MySQL,再从MySQL导入Mongo. 二.准备 1,安装mysql数据库(我用的是WAMP,集成my ...