成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

handlebars.js模板引擎

SimpleTriangle / 1964人閱讀

摘要：基于，可以在中導(dǎo)入模板。利用對象函數(shù)替換對象或者運行函數(shù)支持點語法可以對象等屬性值使用時，直接標(biāo)簽引入文件。模塊會自動匹配相應(yīng)的數(shù)值，對象或者是函數(shù)。也可以多帶帶建立一個模板，或者可以用來唯一確定一個模板，是固定寫法，不可或缺。

前言：常用的末班引擎有很多，但寫法都大同小異。
handlebars.js就是一個純JS庫，因此你可以向其他腳本一樣用script包起來。調(diào)用內(nèi)部封裝好的功能。

1.基于Mustache，可以在handelbars中導(dǎo)入Mustache模板。
利用{{ 對象 函數(shù) }} 替換對象 或者 運行函數(shù)
支持.點語法 可以對象.title等屬性值
2.使用時，直接script標(biāo)簽引入handlebars.js文件。

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

3.基本語法
handlebarsjs 是模塊中的最基本的單元，使用時用兩個花括號{{ }} 包裹。eg：{{ value }} ,handlebars模塊會自動匹配相應(yīng)的數(shù)值，對象或者是函數(shù)。


    
{{name}}

    
{{content}}

也可以多帶帶建立一個模板，
id（或者class）可以用來唯一確定一個模板，type是固定寫法，不可或缺。

4.js 中使用handelbars.compile（）預(yù)編譯模板 ：

//用jquery獲取模板
var tpl  =  $("#tpl").html();
//原生方法
var source = document.getElementById("#tpl").innerHTML;
//預(yù)編譯模板
var template = Handlebars.compile(source);
//模擬json數(shù)據(jù)
var context = { name: "zhaoshuai", content: "learn Handlebars"};
//匹配json內(nèi)容
var html = template(context);
//輸入模板
$(body).html(html);
5.blocks表達式

表達式的后面跟一個# 表示blocks

{{ 表達式 }} 結(jié)束blocks

如果當(dāng)前表達式是 數(shù)組則handelbars會展開數(shù)組。并將blocks的上下文設(shè)為數(shù)組元素）

比如：

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

對應(yīng)json數(shù)據(jù)：

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

渲染后：

    
      
  • JavaScript
    • 
      
  • HTML
    • 
      
  • CSS
    •

6.Handelbars內(nèi)置表達式（Block helper）

each：

利用{{#each name}}來遍歷列表塊的內(nèi)容，
用this來引用遍歷的元素，指數(shù)組里的每一個元素。 name 是數(shù)組。

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

對應(yīng)json是：

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

編譯后：

    
  
  • JavaScript
    • 
  
  • HTML
    • 
  
  • CSS
    •

if else :

指定條件渲染dom；如果 {{ #if list }}，即if后的參數(shù)存在， 則渲染{{ #else }}后面的語句；否則將不會渲染都dom，將執(zhí)行{{ else }}后的error語句；

{{#if list}}

    
    
        {{#each list}}
          
  • {{this}}
    • 
        {{/each}}
    

    
{{else}}
      
{{error}}

{{/if}}

對應(yīng)的json：

var data = {
    info:["HTML5","CSS3","WebGL"],
    "error":"數(shù)據(jù)取出錯誤"
}

unless

{{ #unless }}反向的一個if語句；unless后的參數(shù) 不存在 為false時，渲染dom;

with

{{#with}}一般情況下，Handlebars模板會在編譯的階段的時候進行context傳遞 和 賦值。
使用with的方法，我們可以將context轉(zhuǎn)移到數(shù)據(jù)的一個section里面（如果你的數(shù)據(jù)包含section）。
這個方法在操作復(fù)雜的template時候非常有用。
即：在使用json數(shù)據(jù)較為復(fù)雜時，我們用這種方式來確定模板里填寫的內(nèi)容是json對象的哪一個部分！

 

    
      
{{title}}

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

            {{/with}}

對應(yīng)json數(shù)據(jù)：

{
    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" });

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50447.html

相關(guān)文章

  • 作為一名前端開發(fā)工程師，你必須掌握的WEB模板引擎：Handlebars

    摘要：簡單來說，模板最本質(zhì)的作用是變靜為動，一切利于這方面的都是優(yōu)勢，不利于的都是劣勢。二選擇的原因全球最受歡迎的模板引擎是全球使用率最高的模板引擎，所以當(dāng)之無愧是全球最受歡迎的模板引擎。創(chuàng)建更為復(fù)雜一些，當(dāng)時功能更加強大。 showImg(https://segmentfault.com/img/bVbb3kg?w=775&h=216); 為什么需要使用模板引擎？ 關(guān)于為什么要使用模板引擎...

    yuanzhanghu 評論0 收藏0

  • js模版引擎介紹

    摘要：使用方法編譯模板并根據(jù)所給的數(shù)據(jù)立即渲染出結(jié)果僅編譯模版暫不渲染，它會返回一個可重用的編譯后的函數(shù)根據(jù)給定的數(shù)據(jù)，對之前編譯好的模板進行數(shù)據(jù)渲染參考資料模板引擎概述 js模版引擎介紹 JavaScript 模板是將 HTML 結(jié)構(gòu)從包含它們的內(nèi)容中分離的方法。模板系統(tǒng)通常會引入一些新語法，但通常是非常簡單的，一個要注意的有趣的點是，替換標(biāo)記通常是由雙花括號({ {……} })表示，這也...

    duan199226 評論0 收藏0

  • 前端常用插件、工具類庫匯總

    摘要：頁面調(diào)試騰訊開發(fā)維護的代碼調(diào)試發(fā)布，錯誤監(jiān)控上報，用戶問題定位。同樣是由騰訊開發(fā)維護的代碼調(diào)試工具，是針對移動端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。 本人微信公眾號：前端修煉之路，歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....

    GitCafe 評論0 收藏0

  • 深度定制團隊自己的 Vue template

    摘要：以下也將以進行展開說明。這個鍵值來自于在命令行界面與用戶交互的操作結(jié)果。鍵名對應(yīng)的值為命令行交互中得到的數(shù)據(jù)。關(guān)于項目模板的開發(fā)涉及到的問題差不多就介紹完了，為自己或團隊開發(fā)一份專屬的吧原文深度定制團隊自己的 眾所周知，使用 vue-cli 可以快速初始化一個基于 Vue.js 的項目，官方提供了 webpack、pwa、browserify-simple 等常用 templates。...

    sixgo 評論0 收藏0

  • Nodejs開發(fā)簡單的腳手架工具

    摘要：本文主要是介紹開發(fā)一個簡單的腳手架，了解開發(fā)的基本流程最終通過鏈接到全局包。完成之后，就可以把腳手架發(fā)布到上面，通過進行全局安裝，就可以在自己本機上執(zhí)行來初始化項目，這樣便完成了一個簡單的腳手架工具了。 腳手架，這個名詞對于作為前端的我們來說，也許并不陌生吧，像vue-cli，react-native-cli等，全局安裝后，只需要在命令行中敲入一個簡單的命令，便可幫我們快速的生成一個初...

    sean 評論0 收藏0

發(fā)表評論

0條評論

SimpleTriangle

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<