<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. Thrift架构~动态Thrift插件的注入

    先说AOP 说到注入,大家就会想起来IoC和AOP,确实如些,这一讲中,我们通过unity来实现对thrift插件的动态注入,事实上,这个功能在以后的项目中经常要用到,比如,你将一些功能分发到指定服务 ...

  2. 锋利的JQuery —— 事件和动画

    大图猛戳

  3. 转 jsp中 session的简单用法

    Session对象:是用来分别保存每一个用户信息的对象,以便于跟踪用户的操作状态．Session的信息保存在服务端,Session的ID保存在客户机的Cookie中．事实上,在许多服务器上,如果浏览器 ...

  4. Atitit main函数的ast分析  数组参数调用的ast astview解析

    Atitit main函数的ast分析  数组参数调用的ast astview解析 1.1. Xxcls.main(new String[]{"","bb"}) ...

  5. Windows Server 2012部署Enterprise Solution 5.4

    最近一个客户升级系统,改用Windows Server 2012作为服务器操作系统.升级之后性能未见明显的改善,在不改变代码的基础上,考虑到C/S架构的能力,增加内存或是处理器的处理能力似乎可以解决一 ...

  6. 绘制 ToggleButton --重写view

    package com.example.compoundbuttonview.view; import com.example.compoundbuttonview.R; import android ...

  7. hdu 1241 Oil Deposits (一次dfs搞定有某有)

    #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> us ...

  8. mybatis generator配置生成代码的问题

    接触第二种orm两天下来,一脸懵逼.mybatis是大多数公司所推崇的,相比于hibernate性能较为好的,操作更为方便的轻量级工具,所以小富就搞起这个orm.好吧,都说mybatis有个配置可以自 ...

  9. 牛顿法与拟牛顿法学习笔记（四）BFGS 算法

    机器学习算法中经常碰到非线性优化问题,如 Sparse Filtering 算法,其主要工作在于求解一个非线性极小化问题.在具体实现中,大多调用的是成熟的软件包做支撑,其中最常用的一个算法是 L-BF ...

  10. MyBaits学习

    一:配置MyBaits的开发环境 1.1.核心配置文件 正如hibernate一样,MyBaits也有一个核心的配置文件,它包含着数据源地址,用户名,密码等,还有着各个实体类的配置文件,配置文件是xm ...