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. Docker开启安全的TLS远程连接

    目录 1.1 不安全的远程访问方式 1.1.1 编辑docker.service文件: 1.1.2 重新加载Docker配置生效 1.1.3 警告! 2.1 建立基于TLS数字签名的安全连接 1.1 ...

  2. Jenkins 构建自动化 .NET Core 发布镜像

    Jenkins 构建自动化 .NET Core 发布镜像 导读 在本章中,将介绍如何在 Linux 下使用 Docker 部署.启动 Jenkins,编写脚本,自动化构建 .NET Core 应用,最 ...

  3. 在js中使用moment将秒转换为多少天多少小时多少分多少秒

    let x = 2703750;//单位是秒 var d = moment.duration(x, 'seconds'); console.log(Math.floor(d.asDays()) + ' ...

  4. .Net Core 3.1简单搭建微服务

    学如逆水行舟,不进则退!最近发现微服务真的是大势所趋,停留在公司所用框架里已经严重满足不了未来的项目需要了,所以抽空了解了一下微服务,并进行了代码落地. 虽然项目简单,但过程中确实也学到了不少东西. ...

  5. c++实现希尔密码

    实验名称: 希尔密码的实现(c++版;本文只以26个大写英文字符作为加密后的密文的可选项) 实验原理: 引用知识: 记 Zm={0,1,2,...,m-1} 定义1:设A为定义在集合Zm 上的n阶方阵 ...

  6. centos8添加中文语言包

    centos8添加中文语言包 系统:centos8 查看: [root@centos8]# locale -a 不支持中文包,按照centos7的方式安装:yum install kde-l10n-C ...

  7. 47、django工程（template）

    47.1.django 模板系统介绍: 1.说明: 我们可以直接将 HTML 硬编码到视图的python代码里,尽管这种技术便于解释视图是如何工作的,但却并不是一个好主意. def current_d ...

  8. ps 合并两张图片

    1.ps 打开第一张图片,2.打开另一张图片为图层.3.选中图层,创建蒙版: 4.点击蒙版+按Alt键,打开蒙版:5.打开蒙版后选中渐变工具,途中黑色为不显示区域,(注意渐变模式要改为正常):6.调整 ...

  9. 组建Redis集群遇到`GLIBC_2.14' not found和ps -ef 不显示用户名

    RHEL6.9组建Redis sentinel集群遇到两个问题 今天在组件Redis sentinel 集群时,遇到两个问题,之前已经组建多次,都没碰到类似问题,在解决这两个问题时,耗费些时间. 问题 ...

  10. Jenkins之搭建部署

    一.部署环境 操作系统:Centos7 软件: apache-tomcat-9.0.48--地址:https://tomcat.apache.org/download-90.cgi jdk-8u291 ...