前端模板引擎 - Handlebars

helloworldcoding 发布于2019-08-22 16:10 / 1142人阅读

摘要：前端模板引擎参考参考参考后缀名的后缀有两种，全称的以及简称的条件表达式条件为真时，才执行待渲染数据上海模板片段表示当前作用域表示上一级作用域条件表达式条件为假时，才执行路径表示当前作用域表示上一级作用域块在中每一个都

前端模板引擎 Handlebars

参考1
参考2
参考3

后缀名

Handlebars的后缀有两种，全称的handlebars以及简称的hbs

index.handlebars
  index.hbs

条件表达式 #if

条件为真时，才执行

    // 待渲染数据
    var json={
        city:"上海",
        users:[{username:"tom"},{username:"kity"},{username:"marry"}]
    }


{{#if users.length }}
    {{@index}} - {{username}} - {{./username}} - {{this/name}} - {{this.name}}
{{/if}}

{{#if isActive}}
  
{{else}}
  
{{/if}}

条件表达式 #unless

条件为假时，才执行

  {{#unless license}}
  WARNING: This entry does not have a license!
  {{/unless}}

路径

./ ：表示当前作用域
  ../：表示上一级作用域

块

在handlebars中每一个#都代表一个“块”，每一个块都是一个独立的作用域范围

// 数据
hehe: { words: "hehehehe" }
yoyo: { words: "yoyoyoyo"}

 
 {{#hehe}}
   {{words}}
 {{/hehe}}
 {{#yoyo}}
   {{words}}
 {{/yoyo}}

循环

{{#each student}}

  {{name}}-{{this.name}}-{{./name}}-{{this/name}}
  {{sex}}-{{this.sex}}-{{./sex}}-{{this/sex}}
  {{age}}-{{this.age}}-{{./age}}-{{this/age}}

{{/each}}

{{#each this}}
{{@index}}--{{name}}
{{/each}}

引入子模板


  {{> ../../component/header/header}}
  this is {{name}} page
  {{> ../../component/footer/footer}}

HTML编码

var json={msg:"This is msg."}


{{json}}


{{{json}}}

helper

 //注册一个比较大小的Helper,判断v1是否大于v2
 Handlebars.registerHelper("compare",function(v1,v2,options){
   if(v1>v2){
     //满足添加继续执行
     return options.fn(this);
   }else{
     //不满足条件执行{{else}}部分
     return options.inverse(this);
   }
 });
 
 //注册一个翻译用的Helper，0翻译成男，1翻译成女
 Handlebars.registerHelper("transformat",function(value){
   if(value==0){
     return "男";
   }else if(value==1){
     return "女";
   }
 });

 {{#compare age 20}}
     
       {{name}}
       {{transformat sex}}
       {{age}}
     
 {{else}}
     
       ?
       ?
       ?
     
{{/compare}}

注释


  {{! 这个注释不会渲染到输出结果中 }}

GPU云服务器云服务器模板引擎 python模板引擎 ejs模板引擎 smarty模板引擎

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94107.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
handlebar.js模板引擎（轻页面小工程可用）

摘要：兼容语法，在大多数情况下它可以读取的语法并在你当前模板中使用。不要直接把它放在中否则的解析会改变模板内容。的路径支持简单的路径，就像也支持嵌套的属性，比如对象的属性模板工作的对象这使得使用模板处理字符串成为可能。这种行为是新的，支持。介绍 Handlebars 让你能够有能力高效地容易地创立语义化的模版。Handlebars兼容Mustache语法，在大多数情况下它可以读取Musta...

NickZhou 2019-08-02 11:58 评论0 收藏0
handlebar.js模板引擎（轻页面小工程可用）

摘要：兼容语法，在大多数情况下它可以读取的语法并在你当前模板中使用。不要直接把它放在中否则的解析会改变模板内容。的路径支持简单的路径，就像也支持嵌套的属性，比如对象的属性模板工作的对象这使得使用模板处理字符串成为可能。这种行为是新的，支持。介绍 Handlebars 让你能够有能力高效地容易地创立语义化的模版。Handlebars兼容Mustache语法，在大多数情况下它可以读取Musta...

YuboonaZhang 2019-08-29 17:16 评论0 收藏0