<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. from表单iframe原网页嵌入

    今天是巩固的from表单跟嵌入其他页面,同样的,学习到了新的知识. 温故而知新: iframe--在原页面嵌入其他页面,以窗口的样式 其中scrolling--滚动条 noresize--可调整大小 ...

  2. Paip.语义分析----情绪情感词汇表总结

    Paip.语义分析----情绪情感词汇表总结 以下词语是按感情色彩共分为十四类: 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:h ...

  3. 基于Oracle的SQL优化（社区万众期待 数据库优化扛鼎巨著）

    基于Oracle的SQL优化(社区万众期待数据库优化扛鼎巨著) 崔华 编   ISBN 978-7-121-21758-6 2014年1月出版 定价:128.00元 856页 16开 编辑推荐 本土O ...

  4. rabbitmq消息队列——"Hello World!"

    RabbitMQ 一."Hello World!" 1.简介: RabbitMQ是一种消息中间件,主要思想很简单:接收消息并转发.你可以将它设想为一个邮局:你往里面发送邮件并确保邮 ...

  5. 无服务端纯前台导出数据到Excel-JSExcelXML.js 使用指南

    JSExcelXML 使用指南 先来个效果预览 a.前端显示 b.导出excel效果 表头部分 表尾部分 1.功能描述 JsExcelXml 采用js生成excel中可显示的xml格式文本,将输出文本 ...

  6. 如何制作自己的yum源

    在 /etc/yum.repos.d下创建一个以.repo结尾的文件如aaa.repo,其内容如下(一定要以repo结尾)   [aaa] name=aaa baseurl=http://mirror ...

  7. Vector和Stack源码分析/List集合的总结

    序言 这篇文章算是在这list接口下的集合的最后一篇了,前面ArrayList.LinkedList都已经讲解完了,剩下就Vector和Vector的子类Stack啦.继续努力.一步一个脚印, --W ...

  8. RoundedImageView，实现圆形、圆角矩形的注意事项

    RoundedImageView是gitHub上面的一个开源组件(https://github.com/vinc3m1/RoundedImageView),实现一些圆形或者圆角矩形是很方便的, < ...

  9. Create New Commands in Tcl

    Create New Commands in Tcl eryar@163.com 摘要Abstract:Tcl/Tk脚本可以很容易实现用户自定义的命令,方便的创建图形化的用户界面GUI,所以Tcl和T ...

  10. WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 自定义 ...