<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模板替换的更多相关文章

  1. Handlebars模板库浅析

    Handlebars模板库简单介绍 Handlebars是JavaScript一个语义模板库,通过对view(模板)和data(ajax请求的数据,一般是json)的分离来快速构建Web模板.它采用& ...

  2. express-8 Handlebars模板引擎(1)

    简介 使用JavaScript生成一些HTML document.write('<h1>Please Don\'t Do This</h1>'); document.write ...

  3. handlebars模板引擎使用初探1

    谈到handlebars,我们不禁产生疑问,为什么要使用这样的一个工具呢?它究竟能为我们带来什么样的好处?如何使用它呢? 一.handlebars可以干什么? 首先,我们来看一个案例: 有这样的htm ...

  4. 数据库的修改和删除;比较标签代替<,>,=号;模板替换;session的用法

    注: 1.session:系统默认开启;用途:防止跳过登录(只能访问登录方法);session和cookie的用法(手册->专题); 赋值:session('name','value'); 取值 ...

  5. Handlebars模板引擎中的each嵌套及源码浅读

    若显示效果不佳,可移步到愚安的小窝 Handlebars模板引擎作为时下最流行的模板引擎之一,已然在开发中为我们提供了无数便利.作为一款无语义的模板引擎,Handlebars只提供极少的helper函 ...

  6. thinkphp 模板替换

    具体详见tp手册. 如果需要修改模板替换映射路径. 则需: 'TMPL_PARSE_STRING'=>array( '__PUBLIC__'=>__ROOT__.'/'.APP_NAME. ...

  7. Handlebars模板引擎之上手

    handlebars Handlebars,一个JavaScript模板引擎,是基于Mustache的扩展.模板引擎的都存在一个上下文环境,这是它的作用区间. 需求:基本使用 需要的库 <scr ...

  8. Handlebars模板引擎之高阶

    Helpers 其实在Handlebars模板引擎之进阶我想说if else的功能的,可是由于这个功能在我的开发中我觉的鸡肋没啥用,就直接不用了. 因为if else只能进行简单判断,如果条件参数返回 ...

  9. Handlebars模板引擎

    介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less template"(无逻辑模 ...

随机推荐

  1. js笔记——js里的null和undefined

    以下内容摘录自阮一峰的<语法概述 -- JavaScript 标准参考教程(alpha)>章节『5.null和undefined』,以做备忘. null与undefined都可以表示&qu ...

  2. mysql-5.7.17-winx64免安装版,win10环境下安装配置

    下载地址:http://dev.mysql.com/downloads/file/?id=467269 1.解压到自定义目录:我解压到了D盘的根目录 2.复制my-default.ini 重命名 my ...

  3. 用Chrome插件对自动化测试TestWriter进行录制

    1.打开Chrome浏览器,在浏览地址中输入: chrome://extensions/,并勾选开发者模式.如图: 2.点击按钮[加载已解压的扩展程序-].如图: 3.选择Testwriter客户端下 ...

  4. 每天一个linux命令(21):find命令之xargs

    在使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命令长度有限制,这样在find命令运行几分钟之后,就会出 ...

  5. cordovas禁止横屏

    cordovas禁止横屏 官网 http://cordova.apache.org/docs/en/latest/config_ref/index.html#preference 配置config.x ...

  6. ng-表单验证

    表单验证<AngularJs>   常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type ...

  7. ASP.NET MVC中使用FluentValidation验证实体

    1.FluentValidation介绍 FluentValidation是与ASP.NET DataAnnotataion Attribute验证实体不同的数据验证组件,提供了将实体与验证分离开来的 ...

  8. 【WP 8.1开发】上下文菜单

    在桌面系统中,别说是开发者,相信有资格考得过计算机一级的人都知道什么叫一下文菜单,或者叫右键菜单. 为了让操作更方便,在手机应用程序中,也应当有这样的菜单.上下文菜单之所以有”上下文“之说,是因为通常 ...

  9. poj1703Find them, Catch them(并查集以及路径压缩)

    /* 题目大意:有两个不同的黑帮,开始的时候不清楚每个人是属于哪个的! 执行两个操作 A a, b回答a, b两个人是否在同一帮派,或者不确定 D a, b表示a, b两个人不在同一个帮派 思路:利用 ...

  10. MemCache在win7上的可视化配置以及Nodejs/Net应用

    惯例科普:MemCache是一套分布式的高速缓存系统,由LiveJournal的Brad Fitzpatrick开发,但目前被许多网站使用以提升网站的访问速度,尤其对于一些大型的.需要频繁访问数据库的 ...