<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. PDO连接mysql和pgsql数据库

    PDO连接mysql数据库 <?php $dsn="mysql:host=localhsot;dbname=lamp87"; $user="root"; ...

  2. Atitit.软件中见算法 程序设计五大种类算法

    Atitit.软件中见算法 程序设计五大种类算法 1. 算法的定义1 2. 算法的复杂度1 2.1. Algo cate2 3. 分治法2 4. 动态规划法2 5. 贪心算法3 6. 回溯法3 7. ...

  3. SQLServer数据库还原提示 数据库正在使用，无法获得独占访问权

    还原数据库的时候提示下图的错误:

  4. 使用SQLAlchemy

    使用SQLAlchemy 参考: http://www.sqlalchemy.org/ https://www.keakon.net/2012/12/03/SQLAlchemy%E4%BD%BF%E7 ...

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

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

  6. Oracle 11g系列：视图

    视图是数据库中特有的对象,视图用于存储查询,但不会存储数据(物化视图除外).这是视图和数据表的重要区别.Oracle中有4种视图:关系视图.内嵌视图.对象视图和物化视图. 1.关系视图 1>.创 ...

  7. js实现图片加载特效（从左到右，百叶窗，从中间到两边）

    /* 网上百度的,感觉”从中间到两边“的效果写的不是很好,改了一下,感觉可以了!*/<html> <head> <title></title> < ...

  8. Floyd算法的理解

  9. Spring学习总结（二）——静态代理、JDK与CGLIB动态代理、AOP+IoC

    一.为什么需要代理模式 假设需实现一个计算的类Math.完成加.减.乘.除功能,如下所示: package com.zhangguo.Spring041.aop01; public class Mat ...

  10. 【Java基础】创建和销毁对象

    Num1:考虑用静态工厂方法代替构造器 对于类而言,常见的方法是提供一个公有的构造器,但其实还有一种方法叫做静态工厂方法(static factory method),它只是一个返回类的实例静态方法. ...