<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. EF架构~充血模型设置不被持久化的属性

    回到目录 在Poco实体中,一般只有属性没有方法,这在软件设计中称为贫血模型,而在DDD领域驱动设计中,比较提倡充血模型,即你的Poco实体中,即有属性,也有操作属性的方法,注意这里说的是操作属性的方 ...

  2. Ghost博客安装

    Ghost博客是一个基于Node.js 的开源博客平台,由前WordPress UI 部门主管John O'Nolan 和WordPress 高级工程师Hannah Wolfe 创立,目的是为了给用户 ...

  3. [数据库连接池] Java数据库连接池--DBCP浅析.

    前言对于数据库连接池, 想必大家都已经不再陌生, 这里仅仅设计Java中的两个常用数据库连接池: DBCP和C3P0(后续会更新). 一. 为何要使用数据库连接池假设网站一天有很大的访问量,数据库服务 ...

  4. paip.提升性能--多核cpu中的java/.net/php/c++编程

    paip.提升性能--多核cpu中的java/.net/php/c++编程 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http ...

  5. 转载：Spring AOP (上)

    工 作忙,时间紧,不过事情再多,学习是必须的.记得以前的部门老大说过:“开发人员不可能一天到晚只有工作,肯定是需要自我学习.第一:为了更充实自己,保 持进步状态.第二:为了提升技术,提高开发能力.第三 ...

  6. css3使用box-sizing布局

    css3增添了盒模型box-sizing,属性值有下面三个: content-box:默认值,让元素维持W3C的标准盒模型.元素的宽度/高度(width/height)(所占空间)等于元素边框宽度(b ...

  7. Ubuntu14中supervisor的安装及配置

    supervisor是一款很好用的进程管理工具,其命令也很简单,其安装过程如下: Ubuntu14: 首先保证本地的Python环境是OK的,并且已经安装supervisor包,如果没有安装可以用ea ...

  8. java之内部类详解

    序言 有位小同学要我写一篇这个的总结,我说那好吧,那就动手写总结一下这个内部类的知识,感觉这个在面试中也会经常遇到,内部类.反射.集合.IO流.异常.多线程.泛型这些重要的基础知识大家都比较容易记不住 ...

  9. 新浪微博SDK开发（1）：总述

    花了几天时间,消耗了九牛六虎之力,新浪微博大部分API已经封装,但有部分API实在太难封装. 说起这封装,我必须严重地.从人品和技术层面鄙视一下新浪的程序员,实在太菜了.估计菜鸟都被大企业吸收了,菜到 ...

  10. Android线程处理之Handler总结

    上一篇为大家介绍了如何通过Handler对象把Message数据发送到主线程,我想大家一定都已经掌握了,本篇我将以一个例子的方式为大家总结一下Handler的使用,例子是通过Handler实现一个图片 ...