Handlebars官网链接:http://handlebarsjs.com/,下面是一个简单的例子,欢迎吐槽.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Handlebars Expressions Example</title> <script type="text/javascript" src="../js/jquery-2.1.0.js"></script> <script type="text/javascript" src="../js/handlebars-v1.3.0.js"></script> <script id="people-template" type="text/x-handlebars-template"> {{#each people}} <div> <div>{{diyName first_name last_name email}}</div> <div>{{isHasPhone phone}}</div> <div><a href="mailto:{{email}}">{{email}}</a></div> <div>User since: {{member_since}}</div><br/> </div> {{/each}} </script> <script type="text/javascript"> $(document).ready(function() { Handlebars.registerHelper("isHasPhone", function(txt,fn) { var strVar = ""; if($.trim(txt)!=''&&$.trim(txt)!='NULL'){ strVar = '<span>联系电话:'+txt+'</span>'; }else { strVar = '<span>暂无联系方式</span>'; } return new Handlebars.SafeString(strVar); }); Handlebars.registerHelper("diyName", function(var1,var2,var3,fn) { var strVar = ""; if($.trim(var3)==''){ strVar = '<span>'+var1+' '+var2+'</span>'; }else{ strVar = '<a href="mailto:'+var3+'">'+var1+' '+var2+'</a>'; } return new Handlebars.SafeString(strVar); }); // compile our template var template = Handlebars.compile($("#people-template").html()); var data = { people : [ { first_name : "中文", last_name : "测试", phone : "1234567890", email : "alan@test.com", member_since : "2014-4-11" }, { first_name : "Allison", last_name : "House", phone : " ", email : "allison@test.com", member_since : "2014-5-12" } , { first_name : "测试", last_name : "House", phone : "NULL", email : "allison@test.com", member_since : "2014-6-11" }, { first_name : "无链接", last_name : "test", phone : "NULL", email : " ", member_since : "2014-6-1" } ] }; $('#test').html(template(data)); }); </script> </head> <body> <h1>Handlebars Expressions Example!</h1> <!--this is a list which will rendered by handlebars template. --> <div id="test"></div> </body> </html>
结果为:
全文完。
相关推荐
handlebars官方例子及源代码
Handlebars.java 是一个不包含逻辑的,语义的 Java 模板引擎。 Maven: <groupId>com.github.jknack</groupId> <artifactId>handlebars ${handlebars-version} 示例代码: Handlebars handlebars = ...
handlebars入门教程
handlebars.js
handlebars-v3.0.0.js
Laravel开发-handlebars-l4 Laravel4的handlebars.php包装
Handlebars.js是一个非常流行的功能强大的模板引擎,简单易用,具备较好的学习社区。利用Handlebars您可以方便的把html从javascript代码中分离出来,从而书写更清晰的代码
Jquery插件,第一步当然要引用Jquery啦,然后引用Handlebars.js即可,仅仅需要这两个js文件。 1 <script type="text/javascript" src="script/jquery.js"></script> 2 <script type="text/javascript" src="script/...
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证...
handlebars.js v4.0.5 文件下载。 handlebars.js handlebars
Web开发利器,Javascript模版引擎Handlebars.js源文件与示例
handlebars-v2.0.0.js
Handlebars.js 是一个 JavaScript 的页面模板库 标签:Handlebars
前端项目-requirejs-handlebars,RequireJS Handlebars template plugin
前端开源库-skava-handlebars-compilerskava handlebars compiler,grunt task to precompile handlebars.js模板,选项与cli实用程序相同
Handlerbars.java 是handlebars的一种Java编程入口。Handlebars能够让你毫无压力地,并且高效地构建语义模板。
js模版引擎handlebars.js实用教程demo
前端开源库-yeoman-handlebars-engineyeoman车把引擎,在车把中编写yeoman生成器模板
Locator-Handlebars 是 Yahoo 开发的定位器把手模块编译器。locator-handlebars可插入到要编译把手模版(compile Handlebars templates)的定位组件中。然后编译模版可用于使用 express-view 的服务器和使用了你最...
前端开源库-promised-handlebars承诺的车把,车把的包装,允许帮助者返回承诺