jQuery模板 :(二) JSRender之内置的模板标签
前言:
Jquery UI团队在决定废弃原有的模板解决方案tmpl后(http://josh-persistence.iteye.com/admin/blogs/1914231),Query Template插件的驱动力--Boris Moore--与jQuery UI团队一起,继续开发新的jQuery模板。在2011年10月,Moore发表了一篇博客(http://www.borismoore.com/ 2011/10/jquery-templates-and-jsviews-roadmap.html),更新了新插件工作进度的信息。在该博客中,他声明最终的解决方案将包含两个部分:
(一) JsRender模板,被称为"下一代jQuery模板",为高性能的、纯粹基于字符串的呈现做了优化,并且不依赖于DOM或jQuery。
(二) JsViews模板,它是"交互性的数据驱动视图,构建于JsRender模板之上"。
一、什么是JsRender?
JsRender是一个简单、直观,强大、易扩展、轻量的最优UI模板。
换句话说,就是在Html文件中使用java script来输出html模板的内容。
二、附件是最新的jsrender.js和jsrender.min.js(2013/07/27),如果想下载最新的jsrender.js和jsrender.min.js,可以去官方文档下载:http://www.jsviews.com/#download
二、玩转JsRender
内置的模板标签(Built-in template tags)
1. {{: ...}}:用于输出"..."部分指定的数据,“...”部分是数据来源的路径或者是一个数据表达式,例如:{{:address.street}}
例子:
<!DOCTYPE html> <html> <head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsrender/jsrender.js"></script> </head> <body> <p><em><h2>1: Output Tag {{:...}}</h2></em></p> <div id="result"></div> <div id="result2"></div> <script id="theTmpl" type="text/x-jsrender"> <p> {{:name}} </p> <p> {{:name}}: lives in <b>{{:address.city}}</b>.<br /> Here is <em>~root.address.city</em>: <b>{{:~root.address.city}}</b><br /> Here is <em>~#data.address.city</em>: <b>{{:#data.address.city}}</b> </p> </script> <script id="theTmpl2" type="text/x-jsrender"> <b>{{:#index+1}}:</b> {{:name}}: lives in <b>{{:address.city}}</b>.<br /> </script> <script> var data1 = { "name": "Josh", "address": { "city": "Shanghai" } } var data2 = [ { "name": "Josh", "address": { "city": "Shanghai" } }, { "name": "Wangsheng", "address": { "city": "BiJie" } } ]; var htmlOutput = $("#theTmpl").render(data1); $("#result").html(htmlOutput); var template = $.templates("#theTmpl2"); var htmlOutput2 = template.render(data2); $("#result2").html(htmlOutput2); </script> </body> </html>
其中:在jsRender中,#xxx 表示当前view的 xxx 属性, - 所以 #index 就是view.index
{{:#index+1}}
运行的结果:
2. {{>...}} 用于输出encoded的html。
<!DOCTYPE html> <html> <head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsrender/jsrender.js"></script> </head> <body> <div id="result"></div> <script id="theTmpl" type="text/x-jsrender"> {{:description}}<br/> {{>description}} </script> <script> var data = { "description": "A <b>very nice</b> appartment" }; var template = $.templates("#theTmpl"); var htmlOutput = template.render(data); $("#result").html(htmlOutput); </script> </body> </html>
输出结果:
A very nice appartment
A <b>very nice</b> appartment
3. {{include tmpl=... /}} 标签用于组合模板(template composition) -----用于在一个模板中引入另一个模板,并用上下文的数据来渲染template。
<!DOCTYPE html> <html> <head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsrender/jsrender.js"></script> </head> <body> <script id="peopleTemplate" type="text/x-jsrender"> <div> {{:name}} lives in {{include tmpl="#addressTemplate"/}} </div> </script> <script id="addressTemplate" type="text/x-jsrender"> <b>{{>address.city}}</b> </script> <div id="peopleList"></div> <script> var people = [ { "name": "Pete", "address": { "city": "Seattle" } }, { "name": "Heidi", "address": { "city": "Sidney" } } ]; var html = $("#peopleTemplate").render(people); $("#peopleList").html(html); </script> </body> </html>
输出结果:
4. {{for ...}}遍历数组和对象
1) {{for ...}}遍历对象:
<!DOCTYPE html> <html> <head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsrender/jsrender.js"></script> </head> <body> <script id="peopleTemplate" type="text/x-jsrender"> <div> {{:name}} lives in {{include tmpl="#addressTemplate"/}} </div> </script> <script id="addressTemplate" type="text/x-jsrender"> <b>{{>address.city}}</b> </script> <div id="peopleList"></div> <script> var people = [ { "name": "Josh", "address": { "city": "Shanghai" } }, { "name": "WangSheng", "address": { "city": "GuiYang" } } ]; var html = $("#peopleTemplate").render(people); $("#peopleList").html(html); </script> </body> </html>
输出结果:
2) {{for...}} 遍历数组
<!DOCTYPE html> <html> <head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsrender/jsrender.js"></script> </head> <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 People:", "members": [ { "name": "JoshWang", "address": { "city": "ShangHai" } }, { "name": "WangSheng", "address": { "city": "GuiYang" } } ] }; var template = $.templates("#theTmpl"); var htmlOutput = template.render(data); $("#result").html(htmlOutput); </script> </body> </html>
3)在{{for...}}与{{for...}}之间使用{{else...}}
<!DOCTYPE html> <html> <head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsrender/jsrender.js"></script> </head> <body> <div id="result"></div> <script id="theTmpl" type="text/x-jsrender"> <b>{{:title}}</b> {{for members}} <div>{{:name}}</div> {{else}} <div>No members!</div> {{/for}} </script> <script> var data = { "title": "The A team", "members": [] }; var template = $.templates("#theTmpl"); var htmlOutput = template.render(data); $("#result").html(htmlOutput); </script> </body> </html>
输出结果:
The A team
3) {{if ...}}...{{else}}...{{/if}}
{{if pathOrExpr}...{{else}}...{{/if}}
{{if pathOrExpr1 tmpl=nameOrExpr1 }}{{else tmpl=nameOrExpr2 }}{{/if}}
4) {{if ....}}...{{else ...}}...{{else}}...{{/if}}
{{if pathOrExpr1}}...{{else pathOrExpr2}}...{{else}}...{{/if}
<!DOCTYPE html> <html> <head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsrender/jsrender.js"></script> </head> <body> <div id="result"></div> <script id="theTmpl" type="text/x-jsrender"> <h4>{{:title}}</h4> {{if members && members.length}} <ul> {{for members}} <li>{{:name}}</li> {{/for}} </ul> {{else standby && standby.length}} Standby only: <ul> {{for standby}} <li>{{:name}}</li> {{/for}} </ul> {{else}} No members! {{/if}} </script> <script> var data = [ { "title": "The A team", "members": [ { "name": "JoshWang" }, { "name": "Micheal Shi" } ], "standby": [ { "name": "Xavier" } ] }, { "title": "The B team", "members": [], "standby": [ { "name": "Dunk" }, { "name": "Adriana" } ] }, { "title": "The C team", "standby": [] } ]; var template = $.templates("#theTmpl"); var htmlOutput = template.render(data); $("#result").html(htmlOutput); </script> </body> </html>
输出结果:
The A team
- JoshWang
- Micheal Shi
The B team
Standby only:
- Dunk
- Adriana
The C team
No members!
6. 前面提到的{{else ...}}, {{else ...}}标签可以用于{{if}},{{for}}或者是自定义标签。
1){{else}}用于{{if}}
{{if expression}} render this if the expression is true {{else}} render this if the expression is false {{/if}}
2){{else}}用于{{for}}
{{for members}} Member Name: {{:name}} {{else}} There are currently no members... {{/for}}
3){{else}}用于自定义标签:
{{tabs tabCaption="First Tab"}} first tab content {{else tabCaption="Second Tab"}} second tab content {{/tabs}}
7. 注释标签:{{!-- ... --}}
注:JsRender的注释标签和HTML的注释标签是相对的。你可以在JsRender的代码块中包含如下的代码:
<!-- This is an HTML comment -->
但是这个标签不会被JsRender或者是JsViews忽略掉,会包含在渲染的输出中。