JavaScript頁面模板庫handlebars的簡(jiǎn)單用法
Handlebars 是一個(gè) JavaScript 頁面模板庫,幫助你輕松的構(gòu)建語義化模板。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>handlebars</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="${base}/js/jquery1.11.min.js"></script>
<script src="${base}/js/handlebars-v3.0.0.js"></script>
</head>
<body>
<div id=tt style='display: none'>
<div class="entry">
<h1>{{title}}</h1>
<div class="body">{{body}}</div>
</div>
</div>
</body>
<script type="text/javascript">
//$('#tt').before('<script id="temp" type="sfd">');
//$('#tt').after("</ script>");//
var source = $("#tt").html();
//alert(source);
var template = Handlebars.compile(source);
var data = {title: "My New Post" , body: "This is my first post!"
};
var result = template(data);//將數(shù)據(jù) 填充到模板
console.log(result);
$('#tt').before(result);
</script>
</html>
示例很簡(jiǎn)單,具體詳情可參考ThinkVitamin的文章 Getting Started with Handlebars.js,希望大家能夠喜歡。
- 用javascript實(shí)現(xiàn)兼容IE7的類庫 IE7_0_9.zip提供下載
- 一實(shí)用的實(shí)現(xiàn)table排序的Javascript類庫
- JavaScript 應(yīng)用類庫代碼
- AppBaseJs 類庫 網(wǎng)上常用的javascript函數(shù)及其他js類庫寫的
- JavaScript類庫D
- Javascript類庫的頂層對(duì)象名用戶體驗(yàn)分析
- stream.js 一個(gè)很小、完全獨(dú)立的Javascript類庫
- 5個(gè)最佳的Javascript日期處理類庫分享
- Moment.js 不容錯(cuò)過的超棒Javascript日期處理類庫
- javascript面向?qū)ο蟀b類Class封裝類庫剖析
- javascript拖拽上傳類庫DropzoneJS使用方法
相關(guān)文章
javascript間隔定時(shí)器(延時(shí)定時(shí)器)學(xué)習(xí) 間隔調(diào)用和延時(shí)調(diào)用
這篇文章主要介紹了javascript間隔調(diào)用和延時(shí)調(diào)用示例,介紹setInterval方法和clearInterval方法的使用方法,大家參考使用吧2014-01-01JS仿Windows開機(jī)啟動(dòng)Loading進(jìn)度條的方法
這篇文章主要介紹了JS仿Windows開機(jī)啟動(dòng)Loading進(jìn)度條的方法,實(shí)例分析了javascript操作html元素及對(duì)應(yīng)樣式實(shí)現(xiàn)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過濾操作示例
這篇文章主要介紹了原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過濾操作,結(jié)合實(shí)例形式分析了JavaScript基于頁面元素遍歷、運(yùn)算、判斷實(shí)現(xiàn)的表格過濾相關(guān)操作技巧,需要的朋友可以參考下2019-08-08js實(shí)現(xiàn)網(wǎng)頁圖片延時(shí)加載 提升網(wǎng)頁打開速度
這篇文章主要為大家介紹了js實(shí)現(xiàn)網(wǎng)頁圖片延時(shí)加載,提升網(wǎng)頁打開速度,感興趣的小伙伴們可以參考一下2016-01-01JS 實(shí)現(xiàn)Json查詢的方法實(shí)例
曾經(jīng)看過一個(gè)大牛寫的實(shí)現(xiàn)Json的一個(gè)模板類,今天突然沒事就來自己試著寫寫。還好,一些東西還記得,思路還算清晰。直接上代碼了2013-04-04JS基于正則表達(dá)式的替換操作(replace)用法示例
這篇文章主要介紹了JS基于正則表達(dá)式的替換操作(replace)用法,結(jié)合具體實(shí)例形式詳細(xì)分析了replace函數(shù)的語法、參數(shù)及具體使用技巧,需要的朋友可以參考下2017-04-04百度判斷手機(jī)終端并自動(dòng)跳轉(zhuǎn)js代碼及使用實(shí)例
這篇文章主要介紹了百度判斷手機(jī)終端并自動(dòng)跳轉(zhuǎn)js代碼及使用實(shí)例,需要的朋友可以參考下2014-06-06