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. 菜鸟刷题路：剑指 Offer 03. 数组中重复的数字

    剑指 Offer 03. 数组中重复的数字 哈希表/set class Solution { public int findRepeatNumber(int[] nums) { HashSet< ...

  2. Mybatis映射文件中的参数传递

    一.接口中只有一个参数 1.参数是基本类型or基本类型的包装类or字符串类型 这种情况下映射文件中#{}里的内容可以是任意的,你可以使用#{xxx} 或 #{abc} .....因为此时#{}相当于一 ...

  3. 读HikariCP源码学Java（二）—— 因地制宜的改装版ArrayList：FastList

    前言 如前文所述,HikariCP为了提高性能不遗余力,其中一个比较特别的优化是它没有直接使用ArrayList,而是自己实现了FastList,因地制宜,让数组的读写性能都有了一定程度的提高. 构造 ...

  4. pytest初始化与清除（一）

    一.初始化函数 1.测试用例级别:def setup() 2.套件级别(在模块文件中定义):def setup_module() 3.套件级别(在类中定义): @classmethod def set ...

  5. SpringBoot系列——admin服务监控

    前言 springboot项目部署起来后,如何实时监控项目的运行状况呢?本文记录使用springboot-admin对服务进行监控. springboot-admin介绍:https://codece ...

  6. 【NX二次开发】Block UI 双精度表

    属性说明 常规         类型 描述     BlockID     String 控件ID     Enable     Logical 是否可操作     Group     Logical ...

  7. 管理后台Vue

    管理后台 遇到的问题 搭建 基于vue 3.0 Vue CLI 4.x Ant Design Vue 2.0 搭建后台管理系统 Ant Design Vue 2.0 npm i --save ant- ...

  8. 为什么PMOS比NMOS的沟道导通电阻大，速度慢，价格高-透彻详解

    原文地址点击这里: 在前一节,我们对PMOS与NMOS两种增强型场效应管的开关电路作了详细的介绍, 并且还提到过一种广为流传的说法:相对于NMOS管,PMOS管的沟道导通电阻更大.速度更慢.成本更高等 ...

  9. Jetpack Compose和View的互操作性

    Jetpack Compose Interoperability Compose风这么大, 对于已有项目使用新技术, 难免会担心兼容性. 对于Compose来说, 至少和View的结合是无缝的. (目 ...

  10. layui checkbox 样式

    layui  checkbox扩展插件:  一.新建  checkbox.css 样式文件 .checkBox .block{float:left; margin:5px;padding:6px 6p ...