handlebars模板替换

<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>
时间: 2024-07-28 17:04:06

handlebars模板替换的相关文章

ThinkPHP模板替换

该替换操作仅针对内置的模版引擎 __ROOT__: 会替换成当前网站的地址(不含域名) __APP__: 会替换成当前应用的URL地址 (不含域名) __MODULE__:会替换成当前模块的URL地址 (不含域名) __CONTROLLER__(__或者__URL__ 兼容考虑): 会替换成当前控制器的URL地址(不含域名) __ACTION__:会替换成当前操作的URL地址 (不含域名) __SELF__: 会替换成当前的页面URL __PUBLIC__:会被替换成当前网站的公共目录 通常是

编写一个简单的js模板替换工具 rtt----replace templete tool

最近一段时间在修改自己的个人在线简历.  这个在线简历用到了css3来制作3D的旋转效果, 因此会有兼容性问题, 针对于不支持css3的3D透视的浏览器, 比如 IE,  360等等, 我使用的是另一套css文件兼容.  针对于移动端浏览器, 尽管基本都是webkit内核, 但经测试发现3D效果并不流畅, 因此移动端是识别userAgent切换到另一套非3D页面.  因为没用任何数据库, 那么问题就来了, 移动端和pc端两套页面是共用的一套数据, 我想到的方法有两个: 一是页面加载之后用ajax

改进的模板替换

之前美丽湾项目是用赢家写的替换方法,替换数据时,无法深度遍历,这里修改一下 方法: 1 function tempExt(h, data) { 2 return h.replace(/\{(.*?)\}/g, function (str, m) { 3 var arrM = m.split('.'), 4 t = data[arrM.shift()]; 5 for (var i = 0, _len = arrM.length; i < _len; i++) { 6 t = t[arrM[i]];

Thinphp模板替换

模板替换 在进行模板输出之前,系统还会对渲染的模板结果进行一些模板的特殊字符串替换操作,也就是实现了模板输出的替换和过滤.模板替换适用于所有的模板引擎,包括原生的PHP模板.这个机制可以使得模板文件的定义更加方便,默认的替换规则有: ../Public: 会被替换成当前项目的公共模板目录 通常是 /项目目录/Tpl/当前主题/Public/ __TMPL__: 会替换成项目的模板目录 通常是 /项目目录/Tpl/当前主题/ (注:为了部署安全考虑,../Public和__TMPL__不再建议使用

【Java】字符串模板替换

原文:[Java]字符串模板替换 源代码下载地址:http://www.zuidaima.com/share/1593989887085568.htm 自己封装的工具类中的一个小方法. String str = "大象说它会{0}死,蚂蚁说它会{0}死"; template(str,"胖", "瘦"); 输出: 大象说它会胖死,蚂蚁说它会瘦死 代码请下载. 可以用一些模板语言实现,不过这个代码很好的诠释了模板的机制,赞一个. 参考如下代码: 自己

ThinkPHP模板替换与系统常量及应用

默认的模板替换规则: ../Public : 会被替换成当前项目的公共模板目录 通常是 / 项目目录 /Tpl/default/Public/ __PUBLIC__ :会被替换成当前网站的公共目录 通常是 /Public/ __TMPL__ : 会替换成项目的模板目录 通常是 / 项目目录 /Tpl/default/ __ROOT__ : 会替换成当前网站的地址(不含域名) __APP__ : 会替换成当前项目的 URL 地址 (不含域名) __URL__ : 会替换成当前模块的 URL 地址(

Handlebars模板引擎

Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度.Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板. 使用与安装 Handlebars的安装非常简单,你只需要从Github下载最新版本,你也可访问下面网址获取最新信

Handlebars模板引擎渲染页面

基本使用,并简单列举了几种常见的数据格式的渲染方式 js: var testTpl = Handlebars.compile($('#test').html()); //模板 var arr = [1,2,3] //数据 $('#box').append(testTpl(arr)); //调用 html: <script type="text/x-handlebars-template" id="test"> {{#each this}} <li&

模拟模板替换功能--js

概要: 因为之前的项目是angular开发(vue和react也是一样),对其中的双向数据绑定的使用感觉很方便,然后就思考怎么使用到jquery框架中来,适用于 列表生成 知识点: 正则与其反向引用,str.replace html部分 <!--列表li 模板--> <script type="text/html" id="row"> <li> <h6 class="qa_title"><a