- 浏览: 204028 次
- 性别:
- 来自: 大连
文章分类
- 全部博客 (54)
- java (17)
- hibernate (3)
- javascript (6)
- Ajax (1)
- 插件 (2)
- 数据库 (3)
- html+css+div (5)
- 其他程序 (3)
- 应用技术 (18)
- office (0)
- 小工具 (1)
- 加密解密 (3)
- mac (3)
- 翻译 (1)
- iphone objectc (5)
- iphone (4)
- android (12)
- 圆角 (1)
- layout (2)
- 加密 (1)
- proguard (2)
- Mac 应用技术 系统 工具 (2)
- Mac 应用技术 系统 工具,xcode4 (1)
- 安卓 (6)
- maven (3)
- 高德 (1)
- 地图 (1)
- lrzsz (1)
- rz (1)
- sz (1)
- 脚本 (1)
- linux (1)
- Android Gradle (1)
- Spark (1)
- mongodb (1)
最新评论
-
Jumper_Wu:
想请教个问题:so文件从maven库中拉到AndroidStu ...
在maven android 工程中使用高德地图 -
cuiqi4016:
可不可以把把html模版作为一个单独的文件引入进来,handl ...
Handlebars 的使用 -
lywangbadan:
Handlebars 的使用 -
lituo20:
不错的,以前接触过一点,看了一下,恍然大悟,好像一下子懂了
Handlebars 的使用 -
zhangyaochun:
其实就是模板化,这是以前就开始推崇的面向数据编程的一个方式。比 ...
Handlebars 的使用
web 开发中,js 解析JSON 是经常的事情。非常繁琐。handlebars 使用了模版,只要你定义一个模版,提供一个json对象,handlebars 就能吧json对象放到你定的模版中,非常方便好用! 下面直接上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Handlebars demo</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/handlebars-1.0.0.beta.6.js"></script> <script type="text/javascript" src="js/myjs.js"></script> <style type="text/css"></style> </head> <body> <h2>Simple handlebars demo</h2> <button id="btn_simple">Click me</button> <div id="my_div"> </div> <h2>Handlebars Helpers demo</h2> <button id="btn_helper">Click me</button> <div id="helper_div"> </div> <script id="some-template" type="text/x-handlebars-template"> <table> <thead> <th>Username</th> <th>Real Name</th> <th>Email</th> </thead> <tbody> {{#if users}} <tr> <td>{{username}}</td> <td>{{firstName}} {{lastName}}</td> <td>{{email}}</td> </tr> {{else}} <tr> <td colspan="3">NO users!</td> </tr> {{/if}} </tbody> </table> </script> <script id="helper-template" type="text/x-handlebars-template"> <div> <h1>By {{fullName author}}</h1> <div>{{body}}</div> <h1>Comments</h1> {{#each comments}} <h2>By {{fullName author}}</h2> <div>{{body}}</h2> {{/each}} </div> </script> </body> </html>
$(document).ready(function(){ Handlebars.registerHelper('fullName', function(person) { return person.firstName + " " + person.lastName; }); $("#btn_simple").click(function(){ // $(this).hide(); showTemplate(); }); $("#btn_helper").click(function(){ showHowUseHelper(); }); }); // var context = {title: "My New Post", body: "This is my first post!"}; var persion = {title :"My New Post",body:"This is my first post!"} function showTemplate(){ var source = $("#some-template").html(); var template = Handlebars.compile(source); var data = { users: [ {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" }, {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" }, {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" } ]}; $("#my_div").html(template(data));; } function showHowUseHelper(){ var context = { author: {firstName: "Alan", lastName: "Johnson"}, body: "I Love Handlebars", comments: [{ author: {firstName: "Yehuda", lastName: "Katz"}, body: "Me too!" }] }; var source = $("#helper-template").html(); var template = Handlebars.compile(source); $("#helper_div").html(template(context));; }
评论
4 楼
cuiqi4016
2015-12-17
可不可以把把html模版作为一个单独的文件引入进来,handlebars 除了compile方法可以处理字符串模版之外有没有别的方法可以直接处理hbs文件呢?
3 楼
lywangbadan
2015-08-25
2 楼
lituo20
2013-08-27
不错的,以前接触过一点,看了一下,恍然大悟,好像一下子懂了
1 楼
zhangyaochun
2012-03-31
其实就是模板化,这是以前就开始推崇的面向数据编程的一个方式。比如jquery template
发表评论
-
Spark 连接 MongoDB
2018-03-07 09:55 3293Spark 连接 Mongodb 官方地址:https://w ... -
ListView 中嵌套GridView listview item 不能点击问题
2015-03-12 23:28 2051在ListView的item中有GridView,抢占焦点的情 ... -
android 手机传感器
2014-02-18 14:31 1429List<Sensor> sensors = th ... -
android regex utils
2013-12-31 22:43 0public class RegexUtils { pub ... -
Proguard on MacOSX
2013-10-26 23:33 1166[proguard] Error: Can't read [/ ... -
仿iphone actionsheet
2013-09-11 18:03 2456public class ActionSheet implem ... -
android 自定义progressbar style
2013-09-05 11:22 2668<layer-list xmlns:android=&q ... -
android ADT 17 can not find aapt when build with maven
2013-05-20 23:37 2225更新android adt 版本17之后,程序不能build了 ... -
android 代码proguard
2013-03-17 13:22 3149大家都知道,java 代码很容易被反编译,同样android ... -
Struts 标签实现时间下来选择
2012-09-13 11:58 1299<select id="min" ... -
MapMarkerExample
2012-04-21 01:21 1291This example show you how to dr ... -
Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera
2013-04-11 21:35 1069CSS hacks take advantage of bro ... -
使用CSS实现间隔线|(竖线)
2012-04-13 16:40 2059是不是考虑用这个? <a href="#&qu ... -
google map 根据marker的多少设置中心点和缩放比例
2012-01-13 00:08 7151function changePan(){ var lat ... -
android 程序 发布加密
2011-12-01 13:37 3208大家都知道,现在java程序很容易就让别人反编译,andori ... -
JS来实现浏览器菜单的命令<转>
2010-11-02 17:41 969一、【文件(F)】菜单中的命令的实现 1、〖打开〗命令的实 ... -
Java 文本文件和二进制文件的读取(转)
2010-07-20 11:58 12768一,文本文件的读取 1,FileInputStream:按字 ... -
ymPrompt消息提示组件 2.0,4.0
2010-04-16 09:31 2091最近做项目,感觉js的弹出框总是那一个样子的 ,感觉有点审美疲 ... -
IE和firefox通用的复制到剪贴板的JS函数
2010-04-08 18:39 10571.function copyToClipboard(txt) ... -
java(Web)中相对路径,绝对路径问题总结
2010-04-08 18:35 10521.基本概念的理解 绝对路径:绝对路径就是你的主页上的文 ...
相关推荐
gulp-把手 gulp的车把插件 用法 安装gulp-handlebars作为开发依赖项: ...这就是在gulp-handlebars使用把手的版本的方法: handlebars ( { handlebars : require ( 'handlebars' ) } ) 运行时位于:
Handlebars.java 是一个不包含逻辑的,语义的 Java 模板引擎。 Maven: <groupId>com.github.jknack</groupId> <artifactId>handlebars ${handlebars-version} 示例代码: Handlebars handlebars = ...
车把 简单的类似把手的解析器。 实际上,这只是一个语法,它自动生成一个解析器以识别类似的... 这里使用的语法与Handlebars使用的语法不同。 使用车把,您可以生成任何模板; C#,JavaScript,HTML或简单的纯文本。
js模版引擎handlebars.js实用教程demo
handlebars官方例子及源代码
handlebars入门教程
handlebars.js
handlebars-v3.0.0.js
Laravel开发-handlebars-l4 Laravel4的handlebars.php包装
定位器把手(locator-handlebars) 使用 YAF 的模版,支持超出框中的 YUI 模块格式,且可以以支持任何模块格式的扩展。 此方法的优点是你不需要使用把手分析器,也不需要客户端上把手模板的支持。相反,你可以...
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证...
Jquery插件,第一步当然要引用Jquery啦,然后引用Handlebars.js即可,仅仅需要这两个js文件。 1 <script type="text/javascript" src="script/jquery.js"></script> 2 <script type="text/javascript" src="script/...
本文主要是给大家分享的一个javascript页面模板库Handlebars的简单用法,可以帮助大家轻松的构建语义化模板,非常的实用,推荐给大家。
Web开发利器,Javascript模版引擎Handlebars.js源文件与示例
handlebars.js v4.0.5 文件下载。 handlebars.js handlebars
handlebars-v2.0.0.js
前端开源库-skava-handlebars-compilerskava handlebars compiler,grunt task to precompile handlebars.js模板,选项与cli实用程序相同
Handlebars.js 是一个 JavaScript 的页面模板库 标签:Handlebars
Handlebars.js是一个非常流行的功能强大的模板引擎,简单易用,具备较好的学习社区。利用Handlebars您可以方便的把html从javascript代码中分离出来,从而书写更清晰的代码
前端项目-requirejs-handlebars,RequireJS Handlebars template plugin