模板引擎 Handlebars.js

这里写图片描述

1、介绍

Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建web模板。它采用”Logic-less template”(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译,
这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。


2、使用与安装

Handlebars的安装非常简单,你只需要从github下载最新版本,你也可访问下面网址获取最新信息:http://handlebarsjs.com

handlebars是一个纯js库,因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js

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

3、基本语法

Handlebars expressions 是handlebars模板中最基本的单元,使用方法是加两个花括号{{value}}, handlebars模板会自动匹配相应的数值,对象甚至是函数。

例如:

<div class="demo">  
    <h1>{{name}}</h1>
    <p>{{content}}</p>
</div>  

你可以单独建立一个模板,ID(或者class)和type很重要,因为你要用他们来获取模板内容
例如:

<script id="tpl" type="text/x-handlebars-template">  
<div class="demo">  
        <h1>{{title}}</h1>
        <p>{{content.title}}</p>
    </div>
</script>  

handlebars会根据上下文来自动对表达式进行匹配,如果匹配项是个变量,则会输出变量的值,如果匹配项是个函数,则函数会被调用。

如果没找到匹配项,则没有输出。表达式也支持点操作符,因此你可以使用{{content.title}}这样的形式来调用嵌套的值或者方法,
handlebars会根据当前上下文输出content变量的title属性的值。

在JavaScript中,使用Handlebars.compile()方法来预编译模板
例如:(这是一套规则)

   //用jquery获取模板
    var tpl   =  $("#tpl").html();
    //原生方法
    var source = document.getElementById('#tpl').innerHTML;
    //预编译模板
    var template = Handlebars.compile(source);
    //模拟json数据
    var context = { name: "zhaoshuai", content: "learn Handlebars"};
    //匹配json内容
    var html = template(context);
    //输入模板
    $(body).html(html);

4、表达式

Block表达式

有时候当你需要对某条表达式进行更深入的操作时,Blocks就派上用场了,在Handlebars中,你可以在表达式后面跟随一个#号来表示Blocks,然后通过{{/表达式}}来结束Blocks。
如果当前的表达式是一个数组,则Handlebars会“自动展开数组”,并将Blocks的上下文设为数组中的元素。
例如:

<ul>  
{{#programme}}
    <li>{{language}}</li>
{{/programme}}
</ul>  

有以下JSON数据

{
  programme: [
    {language: "JavaScript"},
    {language: "HTML"},
    {language: "CSS"}
  ]
}

编译模板代码同上……
上面的代码会自动匹配programme数据并展开数据,渲染DOM后就是这样的

<ul>  
  <li>JavaScript</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>  

5、内置的块表达式(Block helper)

<1>. each block helper

你可以使用内置的{{#each}} helper遍历列表块内容,用this来引用遍历的元素
例如:

<ul>  
    {{#each name}}
        <li>{{this}}</li>
    {{/each}}
</ul>  

对应适用的json数据

{
    name: ["html","css","javascript"]
};

这里的this指的是数组里的每一项元素,和上面的Block很像,但原理是不一样的这里的name是数组,而内置的each就是为了遍历数组用的,更复杂的数据也同样适用。

<2>. if else block helper

{{#if}}就你使用JavaScript一样,你可以指定条件渲染DOM,如果它的参数返回false,undefined, null, "" 或者 [] (a "falsy" value),
Handlebar将不会渲染DOM,如果存在{{#else}}则执行{{#else}}后面的渲染

例如:

{{#if list}}
<ul id="list">  
    {{#each list}}
        <li>{{this}}</li>
    {{/each}}
</ul>  
{{else}}
    <p>{{error}}</p>
{{/if}}

对应适用json数据

var data = {  
    info:['HTML5','CSS3',"WebGL"],
    "error":"数据取出错误"
}

这里{{#if}}判断是否存在list数组,如果存在则遍历list,如果不存在输出错误信息

<3>. unless block helper

{{#unless}}这个语法是反向的if语法也就是当判断的值为false时他会渲染DOM
例如:

{{#unless data}}
<ul id="list">  
    {{#each list}}
        <li>{{this}}</li>
    {{/each}}
</ul>  
{{else}}
    <p>{{error}}</p>
{{/unless}}

<4>. with block helper

{{#with}}一般情况下,Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法,我们可以将context转移到数据的一个section里面(如果你的数据包含section)。
这个方法在操作复杂的template时候非常有用。

<div class="entry">  
  <h1>{{title}}</h1>
  {{#with author}}
  <h2>By {{firstName}} {{lastName}}</h2>
  {{/with}}
</div>  

对应适用json数据

{
  title: "My first post!",
  author: {
    firstName: "Charles",
    lastName: "Jolley"
  }
}

6、注释(comments)

Handlebars也可以使用注释写法如下

{{! handlebars comments }}

上面注释经过模板引擎编译后对应的HTML注释是 :

<! handlebars comments >

7、Handlebars的访问(Path)

Handlebar支持路径和mustache,相同,Handlebar还支持嵌套的路径,使得能够查找嵌套低于当前上下文的属性

可以通过.来访问属性也可以使用../,来访问父级属性。
例如:(使用.访问的例子)

<h1>{{author.id}}</h1>  

对应json数据


{
  title: "My First Blog Post!",
  author: {
    id: 47,
    name: "Yehuda Katz"
  },
  body: "My first post. Wheeeee!"
};

例如:(使用../访问)

{{#with person}}
    <h1>{{../company.name}}</h1>
{{/with}}

对应适用json数据

{
    "person":
    { "name": "Alan" },
        company:
    {"name": "Rad, Inc." }
};

8、自定义helper

Handlebars,可以从任何上下文可以访问在一个模板,你可以使用Handlebars.registerHelper()方法来注册一个helper。


9、调试技巧

把下面一段”debug helper”加载到你的JavaScript代码里,然后在模板文件里通过{{debug}}或是{{debug someValue}}方便调试数据

Handlebars.registerHelper("debug", function(optionalValue) {  
  console.log("Current Context");
  console.log("====================");
  console.log(this);
  if (optionalValue) {
    console.log("Value");
    console.log("====================");
    console.log(optionalValue);
  }
});

10、handlebars的jquery插件

(function($) {
    var compiled = {};
    $.fn.handlebars = function(template, data) {
        if (template instanceof jQuery) {
            template = $(template).html();
        }
    compiled[template] = Handlebars.compile(template);
    this.html(compiled[template](data));
    };
})(jQuery);
$('#content').handlebars($('#template'), { name: "Alan" });

关于JS模板引擎的一些阅读

1.浅析JS模板引擎 http://blog.csdn.net/meikidd/article/details/8931904
2.高性能Javascript模板引擎原理解析 http://cdc.tencent.com/?p=5723
3.如何选择需要的模板引擎 http://garann.github.io/template-chooser/ (主要考虑三点:1、性能; 2、客户端、服务器端是否都能兼容? 3、抽象化程度;)
4.JS模板引擎对比 http://blog.csdn.net/wuchengzhi82/article/details/8938122

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
最新仿百度百家模板Wordpress主题源码,采用xhtml标准篡写,科技资讯自媒体网站WP主题,符合seo标准,布局简洁舒心,后台功能非常齐全,并且支持自定义全屏背景大图。 主题特色: 1.可以在后台自定义下拉式的导航设计 2.五张滚动式的幻灯片,图文兼并 3.幻灯片右侧,可以在后台自定义设置三篇最新热点图文 4.首页最新文章数量自定义,同时标题的尾巴一些显目的标识(这个在文章中设置即可,如首发) 5.首页最新文章还有三种格式自定义,包括标注,日志,状态格式(在编辑文章的时候右下角有设置) 6.右侧栏强大的小工具如:特别推荐,根据评论的热门推荐,随机推荐,最新文章,根据浏览量文章排行榜,标签云,最新评论,友情链接等等。 7.网页底部是二级导航,版权信息,二维码信息 8.右侧栏广告可以通过小工具实现 9.logo图片在后台自定义上传设置 10.首页TDK在后台自定义设置符合SEO规范 11.文章页左上角有微博微信QQ空间的分享功能,有利于传播你的文章 12.文章页根据tag读取相关文章,有利于增加内部链接提升SEO效果 13.主题配送一个会员投稿插件,在文章底部会有点赞和收藏的互动功能 14.内置wordpress默认搜索功能 15.内置wordpress评论功能 16.点击图标回顶部功能 17.栏目页支持面包屑功能 18.响应式设计,手机,电脑都可以流畅浏览 安装方法: 1、到网站下载wordpress程序。 2、解压程序压缩包得到一个wordpress命名的文件。 3、用FTP链接网站空间,并且打开根目录。 4、把wordpress文件夹里面的内容全部传输到空间根目录里面去。 5、访问域名,登录管理员账户进入后台选择外观进行安装。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值