handlebars模板替换
<html>
<head>
<meta charset="UTF-8" />
<!--
<script type="text/javascript" src="./jquery-2.1.1.min.js"></script>
-->
<link rel="stylesheet" href="./bootstrap.min.css" />
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./handlebars-v4.0.4.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
{{#items}}
<tr id="entry">
<td><a href="/product_manage/products/{{id}}">{{name}}</a>
{{#children}}
<span>{{this}}</span>
{{/children}}
</td>
<td>{{createAt}}</td>
<td>{{price.price}}</td>
<td>{{price.currency}}</td>
</tr>
{{/items}}
</script> <script type="text/javascript">
function log_msg(msg) {
if ("object" == typeof(console) && "function" == typeof(console.log)) {
console.log(msg) ;
} else {
//alert(msg) ;
}
}
var content={
"page":1,
"pageLimit":10,
"totalCount":2,
"items":
[
{
"name":"iron man",
"uri":"https://wwww.xxx.com/products/1",
"createAt":"2015-05-03",
"price":
{
"price": 200,
"currency":"CNY",
"createAt":"2015-05-01"
},
"children":[40,"a1"]
},
{
"name":"transformer",
"uri":"https://wwww.xxx.com/products/2",
"createAt":"2015-05-02",
"price":
{
"price": 200,
"currency":"CNY",
"createAt":"2015-05-02"
},
"children":[42,"a2"]
}
],
"totalPage":1
}
$(document).ready(function(){
//console.log("8889") ;
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var sHtml = template(content);
//console.log(sHtml) ;
$("#d01").html(sHtml) ;
log_msg(sHtml) ;
}) ;
</script>
</head>
<body>
<div class="container content">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>产品名称</th>
<th>创建日期</th>
<th>价格</th>
<th>币种</th>
</tr>
</thead>
<tbody id="d01"> </tbody>
</table> </div>
</body>
</html>
handlebars模板替换的更多相关文章
- Handlebars模板库浅析
Handlebars模板库简单介绍 Handlebars是JavaScript一个语义模板库,通过对view(模板)和data(ajax请求的数据,一般是json)的分离来快速构建Web模板.它采用& ...
- express－8 Handlebars模板引擎(1)
简介 使用JavaScript生成一些HTML document.write('<h1>Please Don\'t Do This</h1>'); document.write ...
- handlebars模板引擎使用初探1
谈到handlebars,我们不禁产生疑问,为什么要使用这样的一个工具呢?它究竟能为我们带来什么样的好处?如何使用它呢? 一.handlebars可以干什么? 首先,我们来看一个案例: 有这样的htm ...
- 数据库的修改和删除；比较标签代替<,>,=号；模板替换;session的用法
注: 1.session:系统默认开启;用途:防止跳过登录(只能访问登录方法);session和cookie的用法(手册->专题); 赋值:session('name','value'); 取值 ...
- Handlebars模板引擎中的each嵌套及源码浅读
若显示效果不佳,可移步到愚安的小窝 Handlebars模板引擎作为时下最流行的模板引擎之一,已然在开发中为我们提供了无数便利.作为一款无语义的模板引擎,Handlebars只提供极少的helper函 ...
- thinkphp 模板替换
具体详见tp手册. 如果需要修改模板替换映射路径. 则需: 'TMPL_PARSE_STRING'=>array( '__PUBLIC__'=>__ROOT__.'/'.APP_NAME. ...
- Handlebars模板引擎之上手
handlebars Handlebars,一个JavaScript模板引擎,是基于Mustache的扩展.模板引擎的都存在一个上下文环境,这是它的作用区间. 需求:基本使用 需要的库 <scr ...
- Handlebars模板引擎之高阶
Helpers 其实在Handlebars模板引擎之进阶我想说if else的功能的,可是由于这个功能在我的开发中我觉的鸡肋没啥用,就直接不用了. 因为if else只能进行简单判断,如果条件参数返回 ...
- Handlebars模板引擎
介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less template"(无逻辑模 ...
随机推荐
- Js~对数组进行分组户数
在sql里有group by,主要对数据结果集进行分组统计,而对于JS来说,有时我们也需要这种功能,例如一个数据{"dog","cat","dog&q ...
- Asp.net WebApi 项目示例（增删改查）
1.WebApi是什么 ASP.NET Web API 是一种框架,用于轻松构建可以由多种客户端(包括浏览器和移动设备)访问的 HTTP 服务.ASP.NET Web API 是一种用于在 .NET ...
- iOS-UICollectionView
1--------------------------------------------------------------------------------------------------- ...
- Java时间日期格式转换
1.这个是系统自动默认的时间格式,或者说是美式格式: Long time = System.currentTimeMillis(); Date date = new Da ...
- 查看SSIS Package 部署的历史记录
1,通过Integration Services Catalogs来查看 打开SSISDB->Projects,查看指定project的version history,这种方式查看Deploye ...
- OpenCascade BRep Format Description (2)
OpenCascade BRep Format Description eryar@163.com 摘要Abstract:本文结合OpenCascade的BRep格式描述文档和源程序,对BRep格式进 ...
- JAVA实现Excel的读写--poi
上一篇为大家介绍了通过xls.jar的方式生成Excel的方法,本篇就为大家再介绍一下通过poi方式实现Excel文件的读写操作,内容很简单,代码注释很清晰. 1.生成Excel文件: import ...
- Floyd算法的理解
- Angularjs中link函数参数含义小节
restrictE: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>A: 表示该directive仅能以attribu ...
- 2014 -> 2015
2014年初在公司的发展不太顺利, 发现比好多小伙伴的发展速度都要慢了,钱不多,职位也不高,做的事情成长也不快. 为了职业发展考虑,年中就一直想换一个好一点的工作机会, 年中拿了好几个offer, 有 ...