Handlebars.js 模板引擎

介绍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="https://tazarkount.com/read/.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 = https://tazarkount.com/read/{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." }};自定义helperHandlebars ，可以从任何上下文可以访问在一个模板，你可以使用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" });Handlebars 中文文档 | Handlebars 中文网
【Handlebars.js 模板引擎】本文来自博客园，作者：古道轻风，转载请注明原文链接：https://www.cnblogs.com/88223100/p/introducing-the-handlebars-js-templating-engine.html