6月25日恢口，尋游json挖下的坑
心中潛藏的固執(zhí)終于爆發(fā)孝宗，因為開始于楊元的博客，固執(zhí)于每一次渲染開始于循環(huán)耕肩、結(jié)束于循環(huán)因妇。進(jìn)入了一個關(guān)于json格式的死循環(huán)，還不愿意醒猿诸，重復(fù)自己模擬json婚被、取json，但是就是不愿意在自己得到的json中去直接查找直接渲染梳虽。真是執(zhí)著于一個不怎么好的實現(xiàn)址芯，還沾沾自喜，認(rèn)為自己發(fā)現(xiàn)了無人的小角落窜觉，殊不知是一個路旁的可見底的涵洞谷炸，探之無味。
handlebars函數(shù)方法
前一章對handlebars使用的一些思想進(jìn)行了介紹禀挫，這里是承接它對handlebars的使用進(jìn)行一些補充旬陡，不能保證全面，但是我會堅持不斷發(fā)現(xiàn)语婴，不斷補充季惩，完善handlebars的使用录粱。
- handlebars大的使用前奏-三點
- 引用庫
<script src="jquery/jquery.js"></script>
<script src="handlebars/handlebars-v3.0.1.js"></script>
- 頁面數(shù)據(jù)渲染與實現(xiàn)
<script id ="table-template" type="text/x-handlebars-template">
{{data}}
</script>
- 相應(yīng)js獲取json并渲染（一般使用ajax）
<script src="handle.js"></script>
var data = {"data":"data"};
var myTemplate = Handlebars.compile($("#table-template").html());
$('body').html(myTemplate(data));
//這里利用jquery實現(xiàn)對handlebars的編譯與頁面的實現(xiàn)
var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " +
"{{kids.length}} kids:</p>" +
"<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>";
var template = Handlebars.compile(source);
var data = { "name": "Alan", "hometown": "Somewhere, TX",
"kids": [{"name": "Jimmy", "age": "12"}, {"name": "Sally", "age": "4"}]};
var result = template(data);
- handlebars正式使用的語句
- 注釋
不能使用其他的注釋方法：// /**/等，在handlebars都會報錯画拾，只能用
{{! 這是一個注釋}}
{{!-- 一起消失吧--}}
- handlebars表達(dá)式
很多時候啥繁，我們只需要從后臺獲取數(shù)據(jù)，然后將數(shù)據(jù)放在對應(yīng)頁面中青抛，那么就會存在循環(huán)旗闽、判斷等情況，但是通過前面的直接進(jìn)入數(shù)據(jù)是不行的蜜另，所以我們就有了Block表達(dá)式适室，對某些事情進(jìn)行更深入的操作。
一般形式為：{{# blockdemo}}開始到{{/blockdemo}}結(jié)束举瑰。通過一些邏輯操作來進(jìn)行block的定義與使用捣辆。 - handlebars的內(nèi)置塊表達(dá)式（Block helper）
- each block helper === 即循環(huán)，遍歷出列表內(nèi)容此迅，用this來引用遍歷的元素
<ul>
{{#each name}}
<li>{{this}}</li>
{{/each}}
</ul>
對應(yīng)的json
{ name: ["html","css","javascript"]};
- if else block helper == 即if/else語句
使用{{#if}}汽畴、{{#else}} {{/if}}等進(jìn)行渲染，如：
{{#if list}}
<ul id="list">
{{#each list}}
<li>{{this}}</li>
{{/each}}
</ul>
{{else}}
<p>{{error}}</p>
{{/if}}
var data = {
info:['HTML5','CSS3',"WebGL"],
"error":"數(shù)據(jù)取出錯誤"
}
- unless block helper== 與if相反使用即可耸序，如：
{{#unless data}}
<ul id="list">
{{#each list}}
<li>{{this}}</li>
{{/each}}
</ul>
{{else}}
<p>{{error}}</p>
{{/unless}}
- with block helper == 會在編譯的階段的時候進(jìn)行context傳遞和賦值,用with我們可以很簡單的進(jìn)入一個數(shù)據(jù)集合里面忍些，查找對應(yīng)的數(shù)據(jù)很方便，如：
<div class="entry">
<h1>{{title}}</h1>
{{#with author}}
<h2>By {{firstName}} {{lastName}}</h2>
{{/with}}
</div>
{
title: "My first post!",
author: {
firstName: "Charles",
lastName: "Jolley"
}
}
- handlebars自定義標(biāo)簽
handlebars的自定義標(biāo)簽可以使用在Handlebars模板的任何地方坎怪，必須使用Handlebars.registerHelper即注冊helper罢坝，用一個簡單的例子來講解：
Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;});
使用情景：
<div class="post">
<h1>By {{fullName author}}</h1>
<div class="body">{{body}}</div>
<h1>Comments</h1>
{{#each comments}}
<h2>By {{fullName author}}</h2>
<div class="body">{{body}}</div>
{{/each}}
</div>
數(shù)據(jù)：
var context = {
author: {
firstName: "Alan",
lastName: "Johnson"},
body: "I Love Handlebars",
comments: [{
author: {
firstName: "Yehuda",
lastName: "Katz"},
body: "Me too!"
}
]};
結(jié)果：
<div class="post">
<h1>By Alan Johnson</h1>
<div class="body">I Love Handlebars</div>
<h1>Comments</h1>
<h2>By Yehuda Katz</h2>
<div class="body">Me Too!</div>
</div>
注：在自定義標(biāo)簽的helper中可以使用this，this是當(dāng)前的對象搅窿。
- handlebars訪問路徑（Path）
handlebars支持路徑嘁酿，可以使用嵌套的路徑，能夠查找嵌套低于當(dāng)前上下文的屬性：
. 訪問屬性
../ 訪問父屬性
如：
{
title: "My First Blog Post!",
author: {
id: 47,
name: "Yehuda Katz"
},
body: "My first post. Wheeeee!"
};
訪問情況
<h1>{{author.id}}</h1>
{{#with author}}
<h1>{{../title}}</h1>
{{/with}}
- 其他注意點
- {{}}與{{{}}}男应，{{}}會將所有的內(nèi)容解析并轉(zhuǎn)義痹仙，{{{}}}不會對html內(nèi)容進(jìn)行操作，這樣我們需要的html就可以保全殉了，但是必須保證html中無""（改成 ' '）,還有不能有換行等开仰，這樣會報錯
- 還有與volicity有一個沖突的過程，需要注意薪铜。
這就是我要說的詳細(xì)內(nèi)容众弓，缺少請指正，以便及時更新隔箍，及時補充谓娃。
