JsRender系列demo(7)compline
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="../demos.html">JsRender Demos</a><br /> <h3>Accessing paths</h3> <script id="peopleTemplate" type="text/x-jsrender"> <b>{{:#index+1}}:</b> {{>firstName}} {{>lastName}}: <br/>
{{for address tmpl="#addressTemplate"}}{{else}}
Address missing
{{/for}} <div>
Phones:
{{for ~combine(phones, cells)}}
<b>{{>#data}}</b> ({{>#parent.parent.data.firstName}}'s)
{{else}}
{{>#parent.data.firstName}} has no phones or cells
{{/for}} {{!-- or provide an alias to get to firstName from nested content
Phones:
{{for ~combine(phones, cells) ~frstNm=firstName}}
<b>{{>#data}}</b> ({{>~frstNm}}'s)
{{else}}
{{>~frstNm}} has no phones or cells
{{/for}}
--}}
</div> <br/> <i>
{{>firstName}} {{if address && address.street}} {{!-- address may be null or undefined --}}
lives in {{>address.street}}.
{{else}}
has no address...
{{/if}}
</i>
<hr/> </script> <script id="addressTemplate" type="text/x-jsrender">
<div>
{{if street}}
{{>street}}
{{else}}
<i>Somewhere</i> in
{{/if}}
{{>city}}
</div>
</script> <div id="peopleList"></div> <script type="text/javascript">
var people = [
{
firstName: "Pete",
lastName: "Ruffles",
address: {
city: "Bellevue"
},
cells: ["425 666 3455", "425 222 1111"]
},
{
firstName: "Xavier",
lastName: "NoStreet",
phones: ["222 666 3455"],
cells: ["444 666 3455", "999 222 1111"]
},
{
firstName: "Christie",
lastName: "Sutherland",
address: {
street: "222 2nd Ave NE",
city: "Redmond"
}
}
]; $.views.tags({
notLast: function( content ) {
var array = this.parent.data;
return array[ array.length - 1 ] === this.data ? "" : content( this );
}
}); $.views.helpers({
combine: function( arr1, arr2 ) {
return arr1 && arr2 ? arr1.concat(arr2) : arr1 || arr2;
}
}); $( "#peopleList" ).html(
$( "#peopleTemplate" ).render( people )
); </script> </body>
</html>
JsRender系列demo(7)compline的更多相关文章
- JsRender系列demo(9)自定义函数
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(6)-无名
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...
- JsRender系列demo(5) for else
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(4)-if else
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(3)-自定义容器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(2)多模板-template
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(1)-insert-data
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列-11
<!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...
- JsRender系列demo-10
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...
随机推荐
- 《Linux下sed命令的使用》
grep -v 关键字 文件 文件中的关键字给过滤掉 grep -v “^关键字” 文件 以关键字开头的给过滤掉 sed -e ‘/关键字/d’文件 输出时把关键字给删除掉 以/etc ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- 联想预装win8系统改成win7操作步骤及注意事项
联想消费台式机与一体机预装Windows8改装Windows7的操作步骤及常见问题 前提说明: 目前联想出厂预装Windows 8的台式和一体机使用都是UEFI+GPT硬盘的组合,并且开启了安全启动, ...
- ORACLE 语句关联统计
很久不用SQL语句了,貌似入职新公司后,又回归到了三年前的SQL时代,一写一坨的SQL好吧,也当回归一下过去的知识. 下面是统计2月份某数据的计费统计 select t.telno as 主号,VID ...
- HTML5读取本地文件 FileReader API接口
1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. Fil ...
- JVM学习---JAVA内存
一.JAVA运行时数据区域:JAVA中的运行时内存区域有的随着虚拟机进程的启动而存在,有的区域则是依赖用户线程的启动和结束而建立和销毁的.包括以下的几个区域. 图. JAVA虚拟机运行时数据区 1.程 ...
- linux系统版本查看命令
发布:theboy 来源:net [大 中 小] 查看linux系统版本的命令 有如下命令可供参考: # lsb_release -a LSB Version: :core-3.1-ia ...
- jeecms子栏目或者文章页导航父栏目选中解决方法
jeecms在子栏目或者文章页导航父栏目选中,看例子 <div class="nav"> <ul> [@cms_channel_list ] <li ...
- 测试使用Windows Live Writer
目前是在win7系统下面使用的,曾经在winxp下去配置,却失败了,难道不支持xp? Windows Live Writer好像不支持代码关键字高亮显示啊. int main(void) { prin ...
- require.js入门指南(一)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...