Handlebars模板引擎
介绍
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。
使用与安装
Handlebars的安装非常简单,你只需要从Github下载最新版本,你也可访问下面网址获取最新信息:http://handlebarsjs.com。
目前handlebars.js已经被许多项目广泛使用了,handlebars是一个纯JS库,因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js
<script type="text/javascript" src=".js/handlebars.js"></script>
基本语法
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);
Handlebar的表达式
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>
Handlebars的内置块表达式(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"}
}
Handlebar的注释(comments)
Handlebars也可以使用注释写法如下
{{! handlebars comments }}
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." } };
自定义helper
Handlebars,可以从任何上下文可以访问在一个模板,你可以使用Handlebars.registerHelper()
方法来注册一个helper。
调试技巧
把下面一段"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); } });
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" });
转载于:https://www.cnblogs.com/gopark/p/8145949.html
Handlebars模板引擎相关推荐
- Handlebars模板引擎中的each用法(type=“text/x-handlebars-template“)
** handlebar ** 概述与介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less ...
- 关于模板引擎handlebars.js基本用法
说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...
- Express入门 模板引擎hbs 服务端渲染
Express支持多种模板引擎,这里将采用Handlebars模板引擎的服务器端版本hbs模板引擎 . 安装hbs npm install hbs --save-dev 安装hbs模板引擎后改写app ...
- JavaScript模板引擎详解
JavaScript模板引擎是一种用于生成HTML.XML和其他文本格式的工具,它将特定的模板语法转换为相应的文本输出,通常用于前端开发中动态生成页面内容.下面是一个JavaScript模板引擎的详细 ...
- express模板引擎 html,Express新手入坑笔记之动态渲染HTML
在日常项目中,我喜欢用Django做后端, 因为大而全 如果只是写一个简单服务的话, Express是更好的选择, Express是基于nodejs的一个后端框架,特点是简单,轻量, 容易搭建, 而且 ...
- Javascript模板引擎handlebars使用实例及技巧
我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文档中非常大量的块进行操作呢?这时JS模版就派上用场了. 源地址:http://rfyiamcool.b ...
- 作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars
为什么需要使用模板引擎? 关于为什么要使用模板引擎,按照我常说的一句话就是:不用重复造轮子了. 简单来说,模板最本质的作用是"变静为动",一切利于这方面的都是优势,不利于的都是劣势 ...
- js模板引擎 之handlebars.js
最近在接触郑州知识库,里面使用到的技术是值得自己学习的. 该项目前端使用的是handlebars.js模板引擎框架.模板引擎框架用于数据与结构分离的思想,实现页面动态分离的效果. 1.为什么使用模板引 ...
- java handlebars_前端模板引擎Handlebars的使用总结(一)
模板引擎,就是在定义好的模板上面填充与其对应的数据生成静态的html页面,即: 模板 + 数据 =====> html页面 模板引擎的作用是抽象公共页面来重用,并且达到[视图(包括展示渲染逻辑) ...
最新文章
- 西湖大学生命科学学院杨剑教授实验室招聘启事
- maven私有库搭建
- c语言 mysql_bind,C语言连接SQLSERVER数据库
- VS 默认开发环境如何更改
- Centos7 修改SSH 端口
- 【Todo】Zookeeper系列文章
- 谈CRM产品设计的指导思想
- 布局网页表格要求其列平均分布的简单操作
- 订单号生成的一些想法
- 生产者消费者案例java代码
- angular复习笔记4-模板
- 六:SpringCloud-Config
- gradle指令linux守护,gradle之gradlew最全指令攻略
- Windows Phone App Studio 无码开发手机应用
- 虚拟主机支持ssl支持php7,虚拟主机支持https改造吗
- 四选1数据选择器的VHDL程序设计
- 计算机感染冲击波,CIH、爱虫、冲击波、熊猫烧香,对这4种网络病毒你了解多少?...
- 上海达内python 培训视频
- 亚马逊云科技北京区域第二个EC2可用区帮助客户构建高可用架构
- 程序员和工程师有什么不一样?
热门文章
- 小D学blend-----如何创建自定义的Tooltip控件
- 替换WCF默认序列化方式
- 小手段:开启 GNOME 的窗口分组效果
- python测试程序的qps和响应时间代码_Python并发请求下限制QPS(每秒查询率)的实现代码...
- macos 全局快捷键 打开 iterm_MouseInc – 完全免费的全局鼠标手势增强工具 | 马小帮...
- php写项目,php写web项目
- linux 管道非阻塞,在Linux中管道上的非阻塞读取
- python label textvariable_在子窗口中为标签的textvariable赋值失败时,有关,给,Label,问题...
- Fins TCP协议
- halcon与QT联合:(5.2)瓶盖检测以及QT界面搭建