Handlebars---前端引擎模版

Handlebars—前端引擎模版

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

简介

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度

官网

Handlebars官网地址

http://handlebarsjs.com./

特点

优势

Handlebars使用起来方便简洁，可快速创建模板；

扩展性强，可根据自己的需要自定义Helpers，例如常见的类型转换、时间格式转换等；

视图与逻辑分离，解耦性强；

被广泛推广，轻量级、兼容性强；

劣势

代码不清晰，比较混乱，可读性差

拓展性不强，如果需要填充的内容数据类型不够直观、需要转换，这种写法转换起来比较麻烦

假设页面布局结构变动，那么逻辑代码维护起来麻烦

使用

使用CDN

<script type="text/javascript" src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>

案例

each block helper

可以使用内置的{{#each}}helper遍历列表块内容，用this来引用遍历的元素

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

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

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}}

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

unless block helper

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

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

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>

感谢

Handlebars

百度百科

以及勤劳的自己