模板引擎比较久远的一个技术，常见的模板引擎有 baiduTemplate(百度)\artTemplate（腾讯）\juicer（淘宝）\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate 等等

本篇简单介绍一下Handlebars相关常用例子：

Handlebars依赖jq，也可以写不依赖的jq的方式。本教程依赖。

Handlebars官方网站：http://handlebarsjs.com/

例子中有Handlebars的注释方式、数据循环绑定、if/else 判定、浏览器的调试log、自定义helper、自定义partials。

下面这块代码是Handlebars的模板代码：

<script id="table-template-xxxx" type="text/x-handlebars-template">

　　xxxx

</script>

下面代码是数据源代码，可以没有数据，比如log就可以没有数据

var dataxxxxxx = {xxxxxxx}

下面的代码是数据绑定以及页面html模板渲染的代码

var myTemplatexxxxx = Handlebars.compile($("#table-template-xxxxxxxx").html());

$('.xxxxxxxx').html(myTemplatexxxxxxxxxx(dataxxxxxxxx));

下面此处的代码表示的是模板生成的html插入到页面何处

<div class="xxxxxxxx"></div>

　　

　　

<!DOCTYPE html>

<html>

  <head>

    <META http-equiv=Content-Type content="text/html; charset=utf-8">

    <title>each-基本循环使用方法 - by 杨元</title>

  </head>

  <body>

    <h1>each-基本循环使用方法</h1>

    <!--基础html框架-->

    <table>

      <thead>

        <tr>

          <th>姓名</th>

          <th>性别</th>

          <th>年龄</th>

        </tr>

      </thead>

      <tbody id="tableList">

      </tbody>

    </table>
　　<!-- 模板生成完成之后插入的位置 -->

    <div class="if"></div>

    <div class="log"></div>

    <div class="comments"></div>

    <div class="helper"></div>

    <div class="partials"></div>

    <!--插件引用-->

    <script type="text/javascript" src="script/jquery.min.js"></script>

    <script type="text/javascript" src="script/handlebars.min.js"></script>

    <!--Handlebars.js模版-->

    <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->

    <!--id可以用来唯一确定一个模版,type是模版固定的写法-->

    <!-- {{name}} 变量的多种写法，下面的几种方式都是当前页面，当前作用域的变量 -->

    <!-- <p>{{./name}} or {{this/name}} or {{this.name}}</p> -->

    <!-- 循环的写法 -->

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

      {{#each student}}

        <tr>

          <td>{{name}}</td>

          <td>{{sex}}</td>

          <td>{{age}}</td>

        </tr>

        {{else}}

          <h1>No content</h1>

      {{/each}}

    </script>

    <!-- if的写法 -->

    <script id="table-template-if" type="text/x-handlebars-template">

      <div class="entry">

        {{#if author}}

          <h1>{{firstName}} {{lastName}}</h1>

        {{else}}

          <h1>Unknown Author</h1>

        {{/if}}

      </div>

    </script>    

    <!-- log的写法 -->

    <script id="table-template-log" type="text/x-handlebars-template">

      {{log "Look at me!"}}

    </script>    

    <!-- comments 的写法 -->

    <script id="table-template-comments" type="text/x-handlebars-template">

      {{!-- 哇啊哇哇哇 --}}

      {{! 哇啊哇哇哇 }}

    </script>    

    <!-- Helper的写法 -->

    <script id="table-template-helper" type="text/x-handlebars-template">

      <div class="entry">

        <h1>{{title}}</h1>

        {{#with story}}

          <div class="intro">{{{intro}}}</div>

          <div class="body">{{{body}}}</div>

        {{/with}}

      </div>

    </script>    

    <!-- 创建元素的写法 -->

    <script id="table-template-partials" type="text/x-handlebars-template">

      <div class="post">

        {{> userMessage tagName="h1" }}

        <h1>Comments</h1>

        {{#each comments}}

          {{> userMessage tagName="h2" }}

        {{/each}}

      </div> 

    </script>       

    <!--进行数据处理、html构造-->

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

        var data = {

                    "student": [

                        {

                            "name": "张三",

                            "sex": "0",

                            "age": 18

                        },

                        {

                            "name": "李四",

                            "sex": "0",

                            "age": 22

                        },

                        {

                            "name": "妞妞",

                            "sex": "1",

                            "age": 18

                        }

                    ]

                };

        // if的数据

        var dataif = {

          "author": false,

          "firstName": "mary",

          "lastName": "mei"

        }

        // helper数据

        var datalist = {

            title: "First Post",

            story: {

              intro: "Before the jump",

              body: "After the jump"

            }

          }

        // partials数据

        var partials = {

          author: {firstName: "Alan", lastName: "Johnson"},

          body: "I Love Handlebars",

          comments: [{

            author: {firstName: "Yehuda", lastName: "Katz"},

            body: "Me too!"

          }]

        };

        //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架

        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。

        var myTemplate = Handlebars.compile($("#table-template").html());

        //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。

        $('#tableList').html(myTemplate(data));

        // if绑定的代码

        var myTemplateIf = Handlebars.compile($("#table-template-if").html());

        $('.if').html(myTemplateIf(dataif));

        // log绑定的代码，在控制台输出

        var myTemplateIf = Handlebars.compile($("#table-template-log").html());

        $('.log').html(myTemplateIf());

        // comments绑定的代码，注释代码

        var myTemplateComments = Handlebars.compile($("#table-template-comments").html());

        $('.comments').html(myTemplateComments());        

        // helper绑定代码，helper相当于一个自定义function

        var myTemplateList = Handlebars.compile($("#table-template-helper").html());

        Handlebars.registerHelper('with', function(datalist, options) {

          return options.fn(datalist);

        });

        $('.helper').html(myTemplateList(datalist));

        // partials 绑定代码

        var myTemplatePartials = Handlebars.compile($("#table-template-partials").html());

        Handlebars.registerPartial('userMessage',

            '<{{tagName}}>By {{author.firstName}} {{author.lastName}}</{{tagName}}>'

            + '<div class="body">{{body}}</div>');

        $('.partials').html(myTemplatePartials(partials));

      });

    </script>

  </body>

</html>

　　

js模板引擎之 Handlebars 基本用法的更多相关文章

  1. JS模板引擎handlebars.js的简单使用

    handlebars.js的使用 首先我们要明白handlebars.js是干什么用的,我们知道使用jsp很麻烦, 于是我们开始使用freemarker等模板引擎,但这个只是针对服务器端来解 析的,那 ...

  2. 使用新一代js模板引擎NornJ提升React.js开发体验

    当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...

  3. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  4. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  5. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  6. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  7. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

  8. 百度JS模板引擎 baiduTemplate 1.0.6 版

    A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: ...

  9. 浅析js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

随机推荐

  1. HTML5开发必备工具

    现在除了移动APP开发之外,比较火的就是html5开发了,现阶段的HTML5被看做是Web开发者创建流行web应用的利器,增加了对视频和Canvas2D的支持,它的优点就是可以跨平台使用,比如你是开发 ...

  2. 笨办法学Python（十九）

    习题 19: 函数和变量 函数这个概念也许承载了太多的信息量,不过别担心.只要坚持做这些练习,对照上个练习中的检查点检查一遍这次的联系,你最终会明白这些内容的. 有一个你可能没有注意到的细节,我们现在 ...

  3. NWERC 2013 - J (codeforces gym - 100405J)

    题目描述:给你一颗二叉树,保证每个点要么是叶子节点,要么有左右两个儿子.某些叶子节点上放着灯,请你移动最少的灯,使得整棵树平衡 对平衡的定义:对于树上的每个点左右儿子中灯数的差的绝对值≤1,那么这棵树 ...

  4. C#自动更新本地程序

    关于系统的自动更新.近日有一情况是需要将java端后台最新版本的系统文件覆盖本地客户端,简称自动更新了. 本地会获取当前系统的版本号去请求后台java的接口数据.返回给我的是后台压缩包转的base64 ...

  5. background和background-image一点小区别

    如果使用background-image属性,则no-repeat不能使用,因为其对background-image不起作用. 可以使用background属性,再设置no-repeat.

  6. css 伪类选择器制作登录框表单

    使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...

  7. BFS算法入门--POJ3984

    迷宫问题–POJ3984 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 22008 Accepted: 12848 Descri ...

  8. springBoot支持PageHelp插件使用学习笔记

    首先在springboot项目的maven中加入依赖(版本可能需要自己选择合适的) <dependency> <groupId>com.github.pagehelper< ...

  9. 【Ecshop】商品数据采集扩展

    一个自用的Ecshop商品数据采集程序 ->到此下载

  10. c#常用数据结构解析【转载】

    引用:http://blog.csdn.net/suifcd/article/details/42869341 前言:可能去过小匹夫博客的盆油们读过这篇对于数据结构的总结,但是小匹夫当时写那篇文章的时 ...