成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

handlebars.js模板引擎

SimpleTriangle / 2055人閱讀

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

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

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

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

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


    
{{name}}

    
{{content}}

也可以多帶帶建立一個(gè)模板，
id（或者class）可以用來唯一確定一個(gè)模板，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表達(dá)式




表達(dá)式的后面跟一個(gè)# 表示blocks


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


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



比如：


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





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


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



渲染后：


    
      
  • JavaScript
    • 
      
  • HTML
    • 
      
  • CSS
    • 





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


each：


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


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




對(duì)應(yīng)json是：


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



編譯后：


    
  
  • JavaScript
    • 
  
  • HTML
    • 
  
  • CSS
    • 





if else :


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


{{#if list}}

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

    
{{else}}
      
{{error}}

{{/if}}



對(duì)應(yīng)的json：


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






unless


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





with



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


 

    
      
{{title}}

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

            {{/with}}
            
 




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


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



7.handlebar的注釋（comments）


寫法：


{{! handlebars comments }}



8.handlebar的訪問（path）


可以通過 . 語(yǔ)法訪問子屬性；
也可以通過 ../ 來訪問父級(jí)屬性。


{{author.id}}


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

{{/with}}



9.自定義helper


用Handlebars.registerHelper ( )方法來注冊(cè)一個(gè)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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/50447.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    作為一名前端開發(fā)工程師，你必須掌握的WEB模板引擎：Handlebars
    
                                                     
    摘要：簡(jiǎn)單來說，模板最本質(zhì)的作用是變靜為動(dòng)，一切利于這方面的都是優(yōu)勢(shì)，不利于的都是劣勢(shì)。二選擇的原因全球最受歡迎的模板引擎是全球使用率最高的模板引擎，所以當(dāng)之無愧是全球最受歡迎的模板引擎。創(chuàng)建更為復(fù)雜一些，當(dāng)時(shí)功能更加強(qiáng)大。

showImg(https://segmentfault.com/img/bVbb3kg?w=775&h=216);
為什么需要使用模板引擎？
關(guān)于為什么要使用模板引擎...
    
                                                   
                          
    
                                
    
                                    yuanzhanghu
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    js模版引擎介紹
    
                                                     
    摘要：使用方法編譯模板并根據(jù)所給的數(shù)據(jù)立即渲染出結(jié)果僅編譯模版暫不渲染，它會(huì)返回一個(gè)可重用的編譯后的函數(shù)根據(jù)給定的數(shù)據(jù)，對(duì)之前編譯好的模板進(jìn)行數(shù)據(jù)渲染參考資料模板引擎概述

js模版引擎介紹
JavaScript 模板是將 HTML 結(jié)構(gòu)從包含它們的內(nèi)容中分離的方法。模板系統(tǒng)通常會(huì)引入一些新語(yǔ)法，但通常是非常簡(jiǎn)單的，一個(gè)要注意的有趣的點(diǎn)是，替換標(biāo)記通常是由雙花括號(hào)({ {……} })表示，這也...
    
                                                   
                          
    
                                
    
                                    duan199226
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端常用插件、工具類庫(kù)匯總
    
                                                     
    摘要：頁(yè)面調(diào)試騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布，錯(cuò)誤監(jiān)控上報(bào)，用戶問題定位。同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具，是針對(duì)移動(dòng)端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫(kù)。動(dòng)畫庫(kù)動(dòng)畫庫(kù)，也是目前通用的動(dòng)畫庫(kù)。

本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注
本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。
另外，感謝白小明，文中很多的工具來源于此。
彈出框
layer：http://layer....
    
                                                   
                          
    
                                
    
                                    GitCafe
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    深度定制團(tuán)隊(duì)自己的 Vue template
    
                                                     
    摘要：以下也將以進(jìn)行展開說明。這個(gè)鍵值來自于在命令行界面與用戶交互的操作結(jié)果。鍵名對(duì)應(yīng)的值為命令行交互中得到的數(shù)據(jù)。關(guān)于項(xiàng)目模板的開發(fā)涉及到的問題差不多就介紹完了，為自己或團(tuán)隊(duì)開發(fā)一份專屬的吧原文深度定制團(tuán)隊(duì)自己的

眾所周知，使用 vue-cli 可以快速初始化一個(gè)基于 Vue.js 的項(xiàng)目，官方提供了 webpack、pwa、browserify-simple 等常用 templates。...
    
                                                   
                          
    
                                
    
                                    sixgo
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Nodejs開發(fā)簡(jiǎn)單的腳手架工具
    
                                                     
    摘要：本文主要是介紹開發(fā)一個(gè)簡(jiǎn)單的腳手架，了解開發(fā)的基本流程最終通過鏈接到全局包。完成之后，就可以把腳手架發(fā)布到上面，通過進(jìn)行全局安裝，就可以在自己本機(jī)上執(zhí)行來初始化項(xiàng)目，這樣便完成了一個(gè)簡(jiǎn)單的腳手架工具了。

腳手架，這個(gè)名詞對(duì)于作為前端的我們來說，也許并不陌生吧，像vue-cli，react-native-cli等，全局安裝后，只需要在命令行中敲入一個(gè)簡(jiǎn)單的命令，便可幫我們快速的生成一個(gè)初...
    
                                                   
                          
    
                                
    
                                    sean
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           

              
 
                

                    
                    
SimpleTriangle

                    
男|高級(jí)講師

                    
                    

                          
TA的文章

                          閱讀更多
                    

                      
                


                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<