handlebars.js模板引擎

SimpleTriangle 发布于2019-08-01 16:20 / 1844人阅读

摘要：基于，可以在中导入模板。利用对象函数替换对象或者运行函数支持点语法可以对象等属性值使用时，直接标签引入文件。模块会自动匹配相应的数值，对象或者是函数。也可以多带带建立一个模板，或者可以用来唯一确定一个模板，是固定写法，不可或缺。

前言：常用的末班引擎有很多，但写法都大同小异。
handlebars.js就是一个纯JS库，因此你可以向其他脚本一样用script包起来。调用内部封装好的功能。

1.基于Mustache，可以在handelbars中导入Mustache模板。
利用{{ 对象函数 }} 替换对象或者运行函数
支持.点语法可以对象.title等属性值
2.使用时，直接script标签引入handlebars.js文件。

首先github上下载自新版本的handelbars.js http://handlebarsjs.com

3.基本语法
handlebarsjs 是模块中的最基本的单元，使用时用两个花括号{{ }} 包裹。eg：{{ value }} ,handlebars模块会自动匹配相应的数值，对象或者是函数。


    {{name}}
    {{content}}

也可以多带带建立一个模板，
id（或者class）可以用来唯一确定一个模板，type是固定写法，不可或缺。

4.js 中使用handelbars.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);
5.blocks表达式

表达式的后面跟一个# 表示blocks

{{ 表达式 }} 结束blocks

如果当前表达式是数组则handelbars会展开数组。并将blocks的上下文设为数组元素）

比如：


    {{#programme}}
        {{language}}
    {{/programme}}

对应json数据：

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

渲染后：


      JavaScript
      HTML
      CSS

6.Handelbars内置表达式（Block helper）

each：

利用{{#each name}}来遍历列表块的内容，
用this来引用遍历的元素，指数组里的每一个元素。 name 是数组。

 
      {{#each name}}
        {{this}}
      {{/each}}

对应json是：

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

编译后：


  JavaScript
  HTML
  CSS

if else :

指定条件渲染dom；如果 {{ #if list }}，即if后的参数存在，则渲染{{ #else }}后面的语句；否则将不会渲染都dom，将执行{{ else }}后的error语句；

{{#if list}}

    
        {{#each list}}
          {{this}}
        {{/each}}
    
    
{{else}}
      {{error}}
{{/if}}

对应的json：

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

unless

{{ #unless }}反向的一个if语句；unless后的参数 不存在 为false时，渲染dom;

with

{{#with}}一般情况下，Handlebars模板会在编译的阶段的时候进行context传递和赋值。
使用with的方法，我们可以将context转移到数据的一个section里面（如果你的数据包含section）。
这个方法在操作复杂的template时候非常有用。
即：在使用json数据较为复杂时，我们用这种方式来确定模板里填写的内容是json对象的哪一个部分！

 
    
      {{title}}
      
            {{#with author}}
                By {{firstName}} {{lastName}}
            {{/with}}

对应json数据：

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

7.handlebar的注释（comments）

写法：

{{! handlebars comments }}

8.handlebar的访问（path）

可以通过 . 语法访问子属性；
也可以通过 ../ 来访问父级属性。

{{author.id}}

{{#with person}}
    {{../company.name}}
{{/with}}

9.自定义helper

用Handlebars.registerHelper ( )方法来注册一个helper

10.handelbars的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.ucloud.cn/yun/50447.html

作为一名前端开发工程师，你必须掌握的WEB模板引擎：Handlebars

摘要：简单来说，模板最本质的作用是变静为动，一切利于这方面的都是优势，不利于的都是劣势。二选择的原因全球最受欢迎的模板引擎是全球使用率最高的模板引擎，所以当之无愧是全球最受欢迎的模板引擎。创建更为复杂一些，当时功能更加强大。 showImg(https://segmentfault.com/img/bVbb3kg?w=775&h=216); 为什么需要使用模板引擎？关于为什么要使用模板引擎...

yuanzhanghu 2019-08-26 12:02 评论0 收藏0
js模版引擎介绍

摘要：使用方法编译模板并根据所给的数据立即渲染出结果仅编译模版暂不渲染，它会返回一个可重用的编译后的函数根据给定的数据，对之前编译好的模板进行数据渲染参考资料模板引擎概述 js模版引擎介绍 JavaScript 模板是将 HTML 结构从包含它们的内容中分离的方法。模板系统通常会引入一些新语法，但通常是非常简单的，一个要注意的有趣的点是，替换标记通常是由双花括号({ {……} })表示，这也...

duan199226 2019-08-19 18:44 评论0 收藏0
前端常用插件、工具类库汇总

摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。本人微信公众号：前端修炼之路，欢迎关注本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。另外，感谢白小明，文中很多的工具来源于此。弹出框 layer：http://layer....

GitCafe 2019-08-23 13:57 评论0 收藏0
深度定制团队自己的 Vue template

摘要：以下也将以进行展开说明。这个键值来自于在命令行界面与用户交互的操作结果。键名对应的值为命令行交互中得到的数据。关于项目模板的开发涉及到的问题差不多就介绍完了，为自己或团队开发一份专属的吧原文深度定制团队自己的众所周知，使用 vue-cli 可以快速初始化一个基于 Vue.js 的项目，官方提供了 webpack、pwa、browserify-simple 等常用 templates。...

sixgo 2019-08-22 13:47 评论0 收藏0
Nodejs开发简单的脚手架工具

摘要：本文主要是介绍开发一个简单的脚手架，了解开发的基本流程最终通过链接到全局包。完成之后，就可以把脚手架发布到上面，通过进行全局安装，就可以在自己本机上执行来初始化项目，这样便完成了一个简单的脚手架工具了。脚手架，这个名词对于作为前端的我们来说，也许并不陌生吧，像vue-cli，react-native-cli等，全局安装后，只需要在命令行中敲入一个简单的命令，便可帮我们快速的生成一个初...

sean 2019-08-22 18:01 评论0 收藏0