iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 46
1
Modern Web

30天學習30套前端技術(2018年)系列 第 46

[十分鐘學習] Handlebars.js - 輕量型模板套件

Handlebars主要是讓你在做語意型模板(semantic templates)更有效率、且不容易受挫,並且相容Mustache模板,大多數可以直接互換使用。

GitHub Star: 12,900
Javascripting Overall: 88%
瀏覽器: ChromeFirefoxIE5+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

    <!-- Handlebars.js v4.0.11 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    
  • npm

    $ npm install handlebars
    

《範例》

  • 模板

    <script id="input" type="text/x-handlebars-template">
    	<!-- 模板 -->
    	<h1>{{title}}</h1>
    </script>
    <div id="output"></div>
    <script>
    	var source = document.getElementById( "input" ).innerHTML, // 載入模板
    		template = Handlebars.compile( source ), // 編譯模板
    		context = { title: "Hello World" }, // 設定變數
    		html = template( context ); // 存成HTML
    	document.getElementById( "output" ).innerHTML = html; // 輸出
    </script>
    

《延伸》

  1. Handlebars.js: Minimal Templating on Steroids
  2. wycats/handlebars.js

上一篇
[十分鐘學習] ScrollToFixed - 捲軸碰觸到即刻釘住
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言