<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. atitit.TokenService v3 qb1  token服务模块的设计 新特性.docx

    atitit.TokenService v3 qb1  token服务模块的设计 新特性.docx 1.1. V3 新特性1 1.2. V2 新特性1 2. Token的归类1 3. Token的用途 ...

  2. Searching for a valid kernel header path... The path "" is not a valid path to the ***** kernel headers. Would you like to change it? [yes]

    在centos 6.5安装vmtools时候,解压包,mount挂载后,安装pl过程中报 这个问题,半天没有解决,google 后发现这样就行了 I installed the kernel-deve ...

  3. 安装Jenkins

    jenkins是一个广泛用于持续构建的可视化web工具,持续构建说得更直白点,就是各种项目的"自动化"编译.打包.分发部署的工具 1.jenkins的官网 2.jenkins各个系 ...

  4. Spring-Context的注解实现依赖注入功能

    使用Spring-Context的注解实现依赖注入功能. Demo要点: 本例子中主要使用Annotation功能来实现对MoviceService的注入.我们将Cinema.java的头部标注为@C ...

  5. 彻底理解跨域解决方案JSONP

    什么是同源策略? 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页 ...

  6. python中paramiko模块的使用

    paramiko是python一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接1.可以远程操作服务器文件 例如: df:查看磁盘使用情况 mkdir:创建目录 mv/cp/mk ...

  7. JSP网站开发基础总结《二》

    有了上一篇的学习,我相信大家对于JSP一定有了一定的认识,从今天开始我们真正开启JSP模式,如果你有HTML的基础,那学起JSP来也就方便了很多了,首先JSP做为网站开发语言,它与HTML有很多相似的 ...

  8. 总结整理 -- python系列

    python系列 python--基础学习(一)开发环境搭建,体验HelloWorld python--基础学习(二)判断 .循环.定义函数.继承.调用 python--基础学习(三)字符串单引号.双 ...

  9. 邻接矩阵有向图(三)之 Java详解

    前面分别介绍了邻接矩阵有向图的C和C++实现,本文通过Java实现邻接矩阵有向图. 目录 1. 邻接矩阵有向图的介绍 2. 邻接矩阵有向图的代码说明 3. 邻接矩阵有向图的完整源码 转载请注明出处:h ...

  10. MongoDB的学习--索引类型和属性

    索引类型 MongDB的索引分为以下几种类型:单键索引.复合索引.多键索引.地理空间索引.全文本索引和哈希索引 单键索引(Single Field Indexes) 在一个键上创建的索引就是单键索引, ...