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笔记——js里的null和undefined
以下内容摘录自阮一峰的<语法概述 -- JavaScript 标准参考教程(alpha)>章节『5.null和undefined』,以做备忘. null与undefined都可以表示&qu ...
- mysql-5.7.17-winx64免安装版,win10环境下安装配置
下载地址:http://dev.mysql.com/downloads/file/?id=467269 1.解压到自定义目录:我解压到了D盘的根目录 2.复制my-default.ini 重命名 my ...
- 用Chrome插件对自动化测试TestWriter进行录制
1.打开Chrome浏览器,在浏览地址中输入: chrome://extensions/,并勾选开发者模式.如图: 2.点击按钮[加载已解压的扩展程序-].如图: 3.选择Testwriter客户端下 ...
- 每天一个linux命令(21):find命令之xargs
在使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命令长度有限制,这样在find命令运行几分钟之后,就会出 ...
- cordovas禁止横屏
cordovas禁止横屏 官网 http://cordova.apache.org/docs/en/latest/config_ref/index.html#preference 配置config.x ...
- ng-表单验证
表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type ...
- ASP.NET MVC中使用FluentValidation验证实体
1.FluentValidation介绍 FluentValidation是与ASP.NET DataAnnotataion Attribute验证实体不同的数据验证组件,提供了将实体与验证分离开来的 ...
- 【WP 8.1开发】上下文菜单
在桌面系统中,别说是开发者,相信有资格考得过计算机一级的人都知道什么叫一下文菜单,或者叫右键菜单. 为了让操作更方便,在手机应用程序中,也应当有这样的菜单.上下文菜单之所以有”上下文“之说,是因为通常 ...
- poj1703Find them, Catch them(并查集以及路径压缩)
/* 题目大意:有两个不同的黑帮,开始的时候不清楚每个人是属于哪个的! 执行两个操作 A a, b回答a, b两个人是否在同一帮派,或者不确定 D a, b表示a, b两个人不在同一个帮派 思路:利用 ...
- MemCache在win7上的可视化配置以及Nodejs/Net应用
惯例科普:MemCache是一套分布式的高速缓存系统,由LiveJournal的Brad Fitzpatrick开发,但目前被许多网站使用以提升网站的访问速度,尤其对于一些大型的.需要频繁访问数据库的 ...