關于handelbars.js模板引擎

2024-04-27 15:10:35

字體：大中小

來源：轉載

供稿：網友

1.基于Mustache，可以在handelbars中導入Mustache模板。利用{{ 對象函數 }} 替換對象或者運行函數支持.點語法可以對象.title等屬性值2.使用時，直接script標簽引入handlebars.js文件。<scripttype="text/javascript"src="script/jquery.js"></script>2<scripttype="text/Javascript"src="script/handlebars-1.0.0.beta.6.js"></script>3.js 中使用handelbars.compile（）預編譯模板：//用jquery獲取模板vartpl = $("#tpl").html();//原生方法varsource =document.getElementById('#tpl').innerHTML;//預編譯模板vartemplate = Handlebars.compile(source);//模擬json數據varcontext = {name:"zhaoshuai",content:"learn Handlebars"};//匹配json內容varhtml = template(context);//輸入模板$(body).html(html);4.blocks表達式表達式的后面跟一個# 表示blocks{{ /表達式 }} 結束blocks（如果當前表達式是數組則handelbars會展開數組。并將blocks的上下文設為數組元素）比如：<ul>{{#PRogramme}}<li>{{language}}</li>{{/programme}}</ul>對應json數據：{programme: [{language: "JavaScript"},{language: "HTML"},{language: "CSS"}]}渲染后:<ul><li>JavaScript</li><li>HTML</li><li>CSS</li></ul>5. Handelbars內置表達式（Block helper）each：利用{{#each name}}來遍歷列表快內容，用this來引用遍歷的元素，指數組里的每一個元素。 name 是數組。<ul>{{#each name}}<li>{{this}}</li>{{/each}}</ul>對應json是： {name: ["html","css","javascript"]};編譯后：<ul><li>JavaScript</li><li>HTML</li><li>CSS</li></ul>if else 指定條件渲染dom；如果 {{ #if list }}，即if后的參數存在，則渲染{{ #else }}后面的語句；否則將不會渲染都dom，將執行{{ else }}后的error語句；{{#iflist}}<ul id="list">{{#eachlist}}<li>{{this}}</li>{{/each}}</ul>{{else}}<p>{{error}}</p>{{/if}}對應的json：vardata = {info:['HTML5','CSS3',"WebGL"],"error":"數據取出錯誤"}unless{{ #unless }}反向的一個if語句；unless后的參數不存在為false時，渲染dom；{{#unless data}}<ulid="list">{{#each list}}<li>{{this}}</li>{{/each}}</ul>{{else}}<p>{{error}}</p>{{/unless}}with {{#with}}一般情況下，Handlebars模板會在編譯的階段的時候進行context傳遞和賦值。使用with的方法，我們可以將context轉移到數據的一個section里面（如果你的數據包含section）。這個方法在操作復雜的template時候非常有用。<divclass="entry"><h1>{{title}}</h1>{{#withauthor}}<h2>By {{firstName}} {{lastName}}</h2>{{/with}}</div>對應json數據：{title:"My first post!",author: {firstName:"Charles",lastName:"Jolley"}}6. handlebar的注釋（comments）寫法：{{! handlebars comments }}7. handlebar的訪問（path）可以通過 . 語法訪問子屬性；也可以通過 ../ 來訪問父級屬性。h1>{{author.id}}</h1>{{#withperson}}<h1>{{../company.name}}</h1>{{/with}}8. 自定義helper用Handlebars.registerHelper ( )方法來注冊一個helper9. handelbars的jquery插件(function($) {varcompiled = {};$.fn.handlebars=function(template,data){if(templateinstanceofjQuery) {template = $(template).html();}compiled[template] = Handlebars.compile(template);this.html(compiled[template](data));};})(jQuery);$('#content').handlebars($('#template'),{name:"Alan"});

上一篇：關于啟動vue+node.js項目報錯的解決

下一篇：JavaScript 自己封裝的Set