模版引擎Handlebars和Mustache
Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用;
下面这个是基本的模版表达式,
其中 {{ 和 }} 之间为handlerbars的变量;
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
拓展:Handlebars 的使用
其实就是模板化,这是以前就开始推崇的面向数据编程的一个方式。比如jquery template
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="">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));; }
.
模版引擎Handlebars和Mustache的更多相关文章
- js模版引擎handlebars.js实用教程
js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...
- Express学习 ------模版引擎(handlebars)
Handlebars一款js模版引擎,我们在做客户端开发的时候,也可能已经使用过.它语法比较简单,和我们平常写的html 一样,只不过html 中可以加入handlebars 表达式. handleb ...
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——each-循环中使用this
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——each嵌套
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——循环中使用索引
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——with-终极this应用
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
随机推荐
- weblogic启动节点服务java.lang.ClassCastException:com.octestring.vde.backend.BackendRoot cannot be cast to com.octestring.vde.backend.standard.BackendStandard类型转换异常
weblogic启动节点服务器报错,java.lang.ClassCastException:com.octestring.vde.backend.BackendRoot cannot be cast ...
- 大数据学习笔记——HBase使用bulkload导入数据
HBase使用bulkload批量导入数据 HBase可使用put命令向一张已经建好了的表中插入数据,然而,当遇到数据量非常大的情况,一条一条的进行插入效率将会大大降低,因此本篇博客将会整理提高批量导 ...
- Spring Boot 2.X(十三):邮件服务
前言 邮件服务在开发中非常常见,比如用邮件注册账号.邮件作为找回密码的途径.用于订阅内容定期邮件推送等等,下面就简单的介绍下邮件实现方式. 准备 一个用于发送的邮箱,本文是用腾讯的域名邮箱,可以自己搞 ...
- pyhton的安装,环境变量的设置,pycharm的安装下载,中文汉化和字体的设置
1.下载pycharm https://www.7down.com/soft/336988.html 1.pycharm的汉化下载汉化包:resources_cn.jar 放到pycharm的安 ...
- Linux创建Jenkins启动脚本以及开机启动服务
1.jenkins.sh #!/bin/bash ###主要目的用于开机启动服务,不然 启动jenkins.war包没有java -jar的权限 JAVA_HOME=/usr/lib/jdk1.8.0 ...
- js中关于带数字类型参数传参丢失首位数字0问题
最近在项目中遇到一个问题,js中传带有数字的参数时,如果参数开头有数字0,会把0给去掉. 例如: 方法abc(0123456,789); 方法abc中获取的参数0123456就会变为123456. 原 ...
- c++ 拷贝构造函数(重点在内含指针的浅拷贝和深拷贝)
今天同事问了一个关于拷贝构造函数的问题,类中包含指针的情况,今天就来说说c++的拷贝构造函数. c++的拷贝构造函数是构造函数的一种,是对类对象的初始化,拷贝构造函数只有一个参数就是本类的引用. 注意 ...
- TP打印输出SQL语句
模型 -> getLastSql(); //TP打印SQL语句 $data = $this->field($field)->where($condition)->select( ...
- 运维工程师必会工具(Nmap和TCPdump)
1.NMap工具 主要功能:探测主机是否在线.扫描主机开放端口和嗅探网络服务,用于网络探测和安全扫描. NMap支持很多扫描技术,例如:UDP.TCPconnect().TCPSYN(半开扫描).ft ...
- fiddler 常用命令及快捷键
1.搜索: ? baidu.com 2.bpu 发起请求时中断 设置断点 bpu baidu.com 取消断点:bpu 3.bpafter 收到响应后中断 设置断点:bpafter baidu.c ...