日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

Javascript模板引擎handlebars使用实例及技巧

發布時間：2025/3/20 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Javascript模板引擎handlebars使用实例及技巧 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.




我們在開發的時候針對DOM操作，用簡單的JS應用來說不成問題，但如果你對視圖的每次更新都需要對我文檔中非常大量的塊進行操作呢？這時JS模版就派上用場了。


源地址：http://rfyiamcool.blog.51cto.com/1030776/1278620

這是一個實例，我們可以把json的數據，按照自己的想法嵌入到模板里面。


<!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>



看到這個例子，大家感覺很爽吧~ ?就是這樣。。 我們可以通過后端取數據，然后扔到前端，而不用寫各種 "" <> ''的分離符號。


進行遍歷里面的數據，print出來

<script id="each-template" type="text/x-handlebars-template">{{#each people}}... output person's info here...{{/each}} </script>


有數據的話，進行數據渲染

<script id="each-template" type="text/x-handlebars-template">{{#if people}}... output person's info here...{{/if}} </script>


沒有數據的話，就寫沒有數據

<script id="each-template" type="text/x-handlebars-template">{{#unless people.length}}There aren't any people.{{/unless}} </script>


if else 關聯的判斷

<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取值用的


<!DOCTYPE html> <html><head><title>Handlebars Block 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">{{#list people}}`first_name` `last_name` `phone` `email` `member_since`{{/list}}</script><script type="text/javascript">$(document).ready(function() {// compile our templatevar template = Handlebars.compile($("#people-template").html());Handlebars.registerHelper('list', function (items, options) {var out = "<div>";for (var i = 0, l = items.length; i < l; i++) {out = out + "<div>" + "<h5>"+options.fn(items[i])+"</h5>" + "</div> jiewei";}return out + "</div>";});var data = {people: [{ first_name: "Alan", last_name: "Johnson", 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>



我在value加了div和h5的便簽，通過開發者用具可以看到。


源地址：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>




要是想動態的抓數據，那就用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: "{}", //這里是要傳遞的參數，格式為 data: "{paraName:paraValue}",下面將會看到 dataType: 'json', //會返回Json類型success: function(result) { //回調函數，result，返回值//result 是我們需要的值。。。。}});});});//有參數調用


為什么使用 Handlebars.js？ ?

贊成 ?

  • 它是一個弱邏輯模板引擎

  • 你可以在服務端預編譯模板

  • 支持 Helper 方法

  • 可以運行在客戶端和服務端

  • 在模板中支持 `this` 的概念

  • 它是 Mustache.js 的超集

  • 你能想到其他的嗎？

反對 ?

  • 你能想到任何理由嗎？

總結~ ? ?這是一個很棒的js模板引擎~ ?當然功能上沒有backbone.js ?angularjs.js ?強大，但是他的優點很明顯，就是小數據的展現還是相當的容易的。


總結

以上是生活随笔為你收集整理的Javascript模板引擎handlebars使用实例及技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。