1.自定义demo

<html>

    <head>

        <script src="./handlebars-v4.0.12.js"></script>

    </head>

    <body>

        <ul id='tmpContainer1'></ul>

        <ul id = 'tmpContainer2'></ul>

        <!--案例1-->

        <script id='tmp1' type="text/x-handlebars-template">

                {{#each people}}

                <li>{{name}}</li>

                {{/each}}

        </script>

        <script type="text/javascript">

            //1.定义模板填充用的参数

            var content = {

                people : [

                    {name:'aa', age: 12},

                    {name:'bb', age: 12},

                    {name:'cc', age: 15},

                    {name:'dd', age: 16},

                ]

            }

            //2.定义模板

            var template1 = Handlebars.compile(document.getElementById("tmp1").innerHTML);

            //3.模板套用填充参数，返回模板填充结果

            var html1 = template1(content);

            //4.将模板填充的结果嵌入到页面响应位置

            document.getElementById("tmpContainer1").innerHTML = html1;

        </script>

        <!--======================================================-->

        <!--案例2-->

        <script id = 'tmp2' type="text/x-handlebars-template">

            {{#each people}}

            <li>{{combine this}}</li>

            {{/each}}

        </script>

        <script>

             var content = {

                people : [

                    {name:'aa', age: 12},

                    {name:'bb', age: 12},

                    {name:'cc', age: 15},

                    {name:'dd', age: 16},

                ]

            }

            //注意helper的注册要先于 Handlebars.compile()的执行，否则报错。

            Handlebars.registerHelper('combine',function(item){

                return item.name + ' '+ item.age;

            })

            var template2 = Handlebars.compile(document.getElementById("tmp2").innerHTML);

            var html2 = template2(content);

            document.getElementById("tmpContainer2").innerHTML = html2;

        </script>

    </body>

</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. 狂神说redis笔记（二）

    四.三种特殊数据类型 Geospatial(地理位置) 使用经纬度定位地理坐标并用一个有序集合zset保存,所以zset命令也可以使用 geoadd key longitud(经度) latitude ...

  2. 『居善地』接口测试 — 11、接口签名sign原理

    目录 1.什么是加密以及解密? 2.加密方式的分类 (1)对称加密 (2)非对称加密 (3)总结: 3.接口签名sign原理 (1)什么是接口签名? (2)为什么需要做接口签名 (3)接口签名的实践方 ...

  3. 为IHttpClientFactory添加动态命名配置

    某些时候我们需要为HttpClient动态配置一些东西, 例如证书等, 参考博问 如何使用IHttpClientFactory动态添加cer证书. 例如服务是一个回调服务, 而被回调方采用了自定义的h ...

  4. 一文彻底理解Apache Hudi的多版本清理服务

    Apache Hudi提供了MVCC并发模型,保证写入端和读取端之间快照级别隔离.在本篇博客中我们将介绍如何配置来管理多个文件版本,此外还将讨论用户可使用的清理机制,以了解如何维护所需数量的旧文件版本 ...

  5. 小程序微信支付（UNIAPP+第三方SDK：binarywang）

    小程序支付流程图说明(UNIAPP+第三方SDK:binarywang) 说明:小程序为UNI-APP开发,使用的第三方微信支付SDK为binarywang提供的,此SDK对微信公众号.小程序.微信各 ...

  6. 合宙Luat直播间即将开启，你揭开行业奥秘，让你快人一步。

    嗨~刚陪你们过儿童节 和你们一起成长的合宙Luat 又有新计划 -- 合宙Luat官方直播即将开启 - 敬请关注 - - 官方直播什么内容 - 可能是合宙研发动态 可能是新品发布资讯 可能是行业大咖分 ...

  7. （1）Canal入门

    1.前言 在我们系统开发过程中,根据业务场景很多数据库数据并不会直接给用户访问的,需要同步保存到ElasticSearch.Redis等存储应用当中(例如最常见的是搜索页面的ElasticSearch ...

  8. Unity 按空格一直触发Button点击事件的问题

    #解决 这是由于Button中Navigation(导航)功能导致的. 将导航设置为None即可. 真是气死我了,我说为什么点击完按钮界面,按空格就一直触发界面,难搞

  9. 9、解决mstsc卡顿的问题：

    1.同时按住"win+r"键调出"运行",在方框内输入"cmd"后点击"确定"打开dos窗口: 2.在dos中输入&qu ...

  10. 腾讯互动白板+即时通讯+实时音视频，Android学生端接入

    腾讯互动白板+即时通讯+实时音视频,Android学生端接入 一.简介 线上教学方案:腾讯云互动白板(Tencent Interactive Whiteboard,TIW)+即时通信(Instant ...