Javascript模板引擎handlebars使用实例及技巧
生活随笔
收集整理的這篇文章主要介紹了
Javascript模板引擎handlebars使用实例及技巧
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
我們在開發(fā)的時候針對DOM操作，用簡單的JS應用來說不成問題，但如果你對視圖的每次更新都需要對我文檔中非常大量的塊進行操作呢？這時JS模版就派上用場了。
源地址：http://rfyiamcool.blog.51cto.com/1030776/1278620
這是一個實例，我們可以把json的數(shù)據(jù)，按照自己的想法嵌入到模板里面。
<!DOCTYPE html> <html><head><title>Handlebars Expressions Example</title></head><body><h1>Handlebars Expressions Example!</h1> <!--this is a list which will rendered by handlebars template. --><div id="list"></div><script type="text/javascript" src="script/jquery.js"></script><script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script><script id="people-template" type="text/x-handlebars-template">{{#people}}<div class="person"><h2>`first_name` `last_name`</h2><div class="phone">`phone`</div><div class="email"><a href="mailto:`email`">`email`</a></div><div class="since">User since `member_since`</div></div>{{/people}}</script><script type="text/javascript">$(document).ready(function() {// compile our templatevar template = Handlebars.compile($("#people-template").html());var data = {people: [{ first_name: "rui", last_name: "fengyun", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },{ first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },{ first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },{ first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },{ first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }]};$('#list').html(template(data));});</script></body> </html>
看到這個例子，大家感覺很爽吧~ ?就是這樣。。 我們可以通過后端取數(shù)據(jù)，然后扔到前端，而不用寫各種 "" <> ''的分離符號。
進行遍歷里面的數(shù)據(jù)，print出來
<script id="each-template" type="text/x-handlebars-template">{{#each people}}... output person's info here...{{/each}} </script>
有數(shù)據(jù)的話，進行數(shù)據(jù)渲染
<script id="each-template" type="text/x-handlebars-template">{{#if people}}... output person's info here...{{/if}} </script>
沒有數(shù)據(jù)的話，就寫沒有數(shù)據(jù)
<script id="each-template" type="text/x-handlebars-template">{{#unless people.length}}There aren't any people.{{/unless}} </script>
if else 關(guān)聯(lián)的判斷
<script id="each-template" type="text/x-handlebars-template">{{#if people.length}}... output person's info here...`else`There aren't any people.{{/if}} </script>源地址 ：http://rfyiamcool.blog.51cto.com/1030776/1278620
Handlebars.registerHelper('list', function (items, options)
items是后面的key值，options是handlebars取值用的
我在value加了div和h5的便簽，通過開發(fā)者用具可以看到。
源地址：http://rfyiamcool.blog.51cto.com/1030776/1278620
列表的話，有個和jinja2很像的格式。
<div id="list"></div><script type="text/javascript" src="script/jquery.js"></script><script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script><script id="people-template" type="text/x-handlebars-template">{{#each people}}<div class="person">`this`</div>{{/each}}</script><script type="text/javascript">$(document).ready(function () {// compile our templatevar template = Handlebars.compile($("#people-template").html());var data = {people: ["Alan Johnson" ,"Allison House" ,"Nick Pettit","Jim Hoskins","Ryan Carson"]};$('#list').html(template(data));});</script>
要是想動態(tài)的抓數(shù)據(jù)，那就用ajax來搞。
$("button").click(function(){$.getJSON("demo_ajax_json.js",function(result){//result 就是值});}); });我們可以把把result的值扔到模板里面~
$(document).ready(function() {$('#btn1').click(function() {$.ajax({type: "POST", //使用Post方式請求contentType: "application/json",url: "Default2.aspx/HelloWorld",data: "{}", //這里是要傳遞的參數(shù)，格式為 data: "{paraName:paraValue}",下面將會看到 dataType: 'json', //會返回Json類型success: function(result) { //回調(diào)函數(shù)，result，返回值//result 是我們需要的值。。。。}});});});//有參數(shù)調(diào)用
為什么使用 Handlebars.js？ ?
贊成 ?
它是一個弱邏輯模板引擎
你可以在服務端預編譯模板
支持 Helper 方法
可以運行在客戶端和服務端
在模板中支持 `this` 的概念
它是 Mustache.js 的超集
你能想到其他的嗎？
反對 ?
你能想到任何理由嗎？
總結(jié)~ ? ?這是一個很棒的js模板引擎~ ?當然功能上沒有backbone.js ?angularjs.js ?強大，但是他的優(yōu)點很明顯，就是小數(shù)據(jù)的展現(xiàn)還是相當?shù)娜菀椎摹?/span>
總結(jié)
以上是生活随笔為你收集整理的Javascript模板引擎handlebars使用实例及技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU 3591 The trouble
- 下一篇： 电脑开机密码忘记了怎么办？