国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

handlebars.js模板引擎

SimpleTriangle / 1948人閱讀

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

前言：常用的末班引擎有很多，但寫法都大同小異。
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" });

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50447.html

相關文章

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

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

    yuanzhanghu 評論0 收藏0

  • js模版引擎介紹

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

    duan199226 評論0 收藏0

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

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

    GitCafe 評論0 收藏0

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

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

    sixgo 評論0 收藏0

  • Nodejs開發簡單的腳手架工具

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

    sean 評論0 收藏0

發表評論

0條評論

SimpleTriangle

男|高級講師

TA的文章

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