前端模板引擎 - Handlebars

helloworldcoding 發布于2019-08-22 16:10 / 1143人閱讀

摘要：前端模板引擎參考參考參考后綴名的后綴有兩種，全稱的以及簡稱的條件表達式條件為真時，才執行待渲染數據上海模板片段表示當前作用域表示上一級作用域條件表達式條件為假時，才執行路徑表示當前作用域表示上一級作用域塊在中每一個都

前端模板引擎 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模板引擎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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