1.自定义demo

  1. <html>
  2.     <head>
  3.         <script src="./handlebars-v4.0.12.js"></script>
  4.     </head>
  5.     <body>
  6.         <ul id='tmpContainer1'></ul>
  7.         <ul id = 'tmpContainer2'></ul>
  8.  
  9.         <!--案例1-->
  10.         <script id='tmp1' type="text/x-handlebars-template">
  11.                 {{#each people}}
  12.                 <li>{{name}}</li>
  13.                 {{/each}}
  14.         </script>
  15.         <script type="text/javascript">
  16.             //1.定义模板填充用的参数
  17.             var content = {
  18.                 people : [
  19.                     {name:'aa', age: 12},
  20.                     {name:'bb', age: 12},
  21.                     {name:'cc', age: 15},
  22.                     {name:'dd', age: 16},
  23.                 ]
  24.             }
  25.             //2.定义模板
  26.             var template1 = Handlebars.compile(document.getElementById("tmp1").innerHTML);
  27.             //3.模板套用填充参数，返回模板填充结果
  28.             var html1 = template1(content);
  29.             //4.将模板填充的结果嵌入到页面响应位置
  30.             document.getElementById("tmpContainer1").innerHTML = html1;
  31.         </script>
  32.  
  33.         <!--======================================================-->
  34.  
  35.         <!--案例2-->
  36.         <script id = 'tmp2' type="text/x-handlebars-template">
  37.             {{#each people}}
  38.             <li>{{combine this}}</li>
  39.             {{/each}}
  40.         </script>
  41.         <script>
  42.              var content = {
  43.                 people : [
  44.                     {name:'aa', age: 12},
  45.                     {name:'bb', age: 12},
  46.                     {name:'cc', age: 15},
  47.                     {name:'dd', age: 16},
  48.                 ]
  49.             }
  50.             //注意helper的注册要先于 Handlebars.compile()的执行，否则报错。
  51.             Handlebars.registerHelper('combine',function(item){
  52.                 return item.name + ' '+ item.age;
  53.             })
  54.  
  55.             var template2 = Handlebars.compile(document.getElementById("tmp2").innerHTML);
  56.             var html2 = template2(content);
  57.             document.getElementById("tmpContainer2").innerHTML = html2;
  58.  
  59.         </script>
  60.     </body>
  61. </html>

2. 更多demo（较详细介绍）请参看如下博客

http://www.cnblogs.com/zcynine/p/5014421.html

Html模板引擎Handlerbars使用demo的更多相关文章

  1. 写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）

    前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...

  2. 迷你版 smarty --模板引擎和解析

    http://blog.ipodmp.com/archives/php-write-a-mini-smarty-template-engine/ 迷你版Smarty模板引擎目录结构如下: ① 要开发一 ...

  3. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  4. web框架--tornado框架之模板引擎

    使用Tornado实现一个简陋的任务表功能demo来讲解tornado框架模板引擎 一.demo目录结构 二.具体文件内容 2.1.commons.css .body{ margin: 0; back ...

  5. JavaScript模板引擎实例应用（转）

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  6. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  7. CMS模板引擎：XHtmlAction

    前言: 先说说大伙关心的工作上的事,在上家公司任了一个多月的技术经理后,和公司中止了合作关系. 主要原因在于一开始的待遇没谈的太清楚: 1:没有合同,没有公积金,连社保也没交. 2:工资的30%变成了 ...

  8. knockoutJS学习笔记01：从拼接字符串到编写模板引擎

    开篇 关于knockout的文章,园里已经有很多大神写过了,而且都写得很好.其实knockout学习起来还是很容易的,看看官网的demo和园里的文章,练习练习就可以上手了(仅限使用,不包含研究源码). ...

  9. knockoutJS学习笔记02：jsRender模板引擎

    上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍另外一个模板引擎:jsRe ...

随机推荐

  1. android小技巧之点击两次退出活动

    通常在主活动中可以设置连击退出程序,下面通过代码来实现这一功能: @Override//按两次back键退出public boolean onKeyDown(int keyCode, KeyEvent ...

  2. Spring Boot WebFlux-06——WebFlux 整合 Redis

    第06课:WebFlux 整合 Redis 前言 上一篇内容讲了如何整合 MongoDB,这里继续讲如何操作 Redis 这个数据源,那什么是 Reids? Redis 是一个高性能的 key-val ...

  3. 液晶显示系列（2）之黑色背景的PPT更省电环保吗？常黑与常白型LCD

    原文地址点击这里: 数年前听过一个培训师讲课,他的电脑课件PPT背景颜色是黑色的?美其名曰:黑色省电环保!当时讲台下听课的那些菜鸟们(也包括区区在下)深以为然,不由得心中竖起大拇指:这老师有水平,境界 ...

  4. Pytest学习笔记6-自定义标记mark

    前言 在pytest中,我们可以使用mark进行用例的自定义标记,通过不同的标记实现不同的运行策略 比如我们可以标记哪些用例是生产环境执行的,哪些用例是测试环境执行的,在运行代码的时候指定对应的mar ...

  5. 分布式AKF拆分原则

    1. 前言 当我们需要分布式系统提供更强的性能时,该怎样扩展系统呢?什么时候该加机器?什么时候该重构代码?扩容时,究竟该选择哈希算法还是最小连接数算法,才能有效提升性能? 在面对 Scalabilit ...

  6. 第1章：Kubernetes 系统基础

    51.1.kubernetes介绍: 1.什么是kubernetes: (1)Kubernetes是容器集群管理系统,是一个开源的平台,可以实现容器集群的自动化部署.自动扩缩容.维护等功能. (2)使 ...

  7. 6、基本数据类型(list)

    6.1.列表: 1.li = [1, 12, 9, "age", ["孙子涵", ["19", 10], "张涵予"], ...

  8. 使用Flash Builder 4.6出现 新建配置 失败 java.lang.NullPointerException错误

    当看到这个错误的时候有点莫名奇妙的感觉,随后的第一反应是: 这跟我前些天安装的java的jre 1.8 有没有关联性.修改了设定,方法如下 "运行" -> "外部工 ...

  9. vue elementui table 内按钮跳转页面

    vue : <el-table-column label="操作" v-if="isColumOperate"> <template slot ...

  10. 利用C语言识别用户输入字符并且输出该字符ASCII码值（大小写字母篇）（含思路）

    要求:从键盘输入一个字符,如果输入字符的是小写英文字母,则将其转换为大写英文字母,然后将转换后的英文字母及其ASCII码值输出到屏幕上,如果输入的是其他字符,则不转换并且直接将它及其ASCII码值输出 ...