JavaScript语义模板库handlebars的demo
2014-02-13 11:48
351 查看
<!DOCTYPE html> <html> <head> <title>Handlebars Expressions Example</title> </head> <body> <h1>Handlebars Expressions Example!</h1> <!--this is a list which will rendered by handlebars template. --> <div id="list"> </div> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> //模板 <script id="people-template" type="text/x-handlebars-template"> {{#people}} <div class="person"> <h2>{{first_name}} {{last_name}}</h2> <div class="phone">{{phone}}</div> <div class="email"><a href="mailto:{{email}}">{{email}}</a></div> <div class="since">User since {{member_since}}</div> </div> {{/people}} </script> <script type="text/javascript"> $(document).ready(function() { // 编译模板 var template = Handlebars.compile($("#people-template").html()); //json数据 var data = { people: [ { first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" }, { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" }, { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" }, { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" }, { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" } ] }; //赋值,并把模板的html给目标div $('#list').html(template(data)); }); </script> </body> </html>
相关文章推荐
- 在传参时,url参数中包含+、空格、=、%、&、#等特殊符号的处理
- 【开放平台】各平台相关API搜集&调用遇到问题一览表(Javascript版本)
- JS 中的 Window 对象
- JavaScript基础深入研究
- FireBug 调试JS入门
- [转]js刷新父窗体
- js加载读取内容及显示与隐藏div
- JS OffsetParent属性
- jsp下载
- JS的trim()方法
- Extjs GRID表格组件使用小结
- 面向对象的JavaScript及HTML5
- Javascript的原型链、instanceof与typeof
- EXTJS 基础知识点整理
- JS日期时间类型(Y-m-d H:i:s)与时间戳互转
- 用javascript如何在框架间传值
- a href=#与 a href=javascript:void(0) 的区别
- JavaScript【面向对象】-静态方法-私有方法-公有方法-特权方法
- jsp页面文本输入框输入参数状态保持
- JavaScript原型链(Prototype)的设计思想