Handlebars.js的下载及使用示例
2014-05-26 11:26
337 查看
官方下载地址:Handlebars.js
<!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-1.3.1.js"></script> <script type="text/javascript" src="script/handlebars-v1.3.0.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() { // compile our template var template = Handlebars.compile($("#people-template").html()); 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" } ] }; $('#list').html(template(data)); }); </script> </body> </html>
相关文章推荐
- handlebars.js 使用心得(1)
- JavaScript页面模版引擎handlebars.js学习及使用
- js模版引擎handlebars.js实用教程——循环中使用索引
- Handlebars的使用方法文档整理(Handlebars.js)
- handlebars.js模版引擎中EACH循环遍历的使用
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
- Handlebars.js 使用入门
- vue.js 使用axios实现下载功能的示例
- 【h1】handlebars.js使用时渲染空白
- Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
- js模版引擎handlebars.js实用教程——each-循环中使用this
- 使用JS实现文件下载示例(asp.net)
- 使用webstrom 新建node.js 项目 express + handlebars
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- (四)线程--使用线程回调方法(示例下载)
- 演示事件(Event)怎样使用以及怎样为用户控件添加一个事件(示例代码下载)
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- 演示Session对象使用 范例(示例代码下载)
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)