H5中都是Html,在這裏咱們沒有el標籤。因此咱們只能藉助模板。好處上面已經介紹了html
掃碼關注公衆號,不按期更新干活web
web 開發中,js 解析JSON 是常常的事情。很是繁瑣。handlebars 使用了模版,只要你定義一個模版,提供一個json對象,handlebars 就能吧json對象放到你定的模版中,很是方便好用!json
<script id="task-table-template" type="text/x-handlebars-template">
{{#each this}}//遍歷循環的格式,至關於foreach
<a href="{{link}}">//json中的link必須是{{}}格式
<strong>
{{Obj_title}}//同上
</strong>
</a>
{{/each}}
</script>複製代碼
var myTemplate = Handlebars.compile($("#task-table-template").html());複製代碼
$('.notice_srcoll').html(myTemplate(data.noticeTasklist));複製代碼
var data = { users: [
{username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
{username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },
{username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
]};複製代碼
{{#if score}}
<li>
<font>
<input type="checkbox" name="you" id="{{id}}" class="regular-checkbox big-checkbox" value="{{id}}" checked disabled/>
<label for="{{id}}"></label>
</font>
<div class="li_div">
<strong>
{{name}}
</strong>
<p>主講老師
{{teacher}}
</p>
</div>
</li>
{{else}}
<li>
<font><input type="checkbox" name="you" id="{{id}}1" class="regular-checkbox big-checkbox" value="{{id}}" />
<label for="{{id}}1"> </label>
</font>
<div class='li_div'>
<strong>
"{{name}}"
</strong>
<p>主講老師
{{teacher}}
</p>
</div>
</li>
{{/if}}複製代碼
{{#compare age 20}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{else}}
<tr>
<td>?</td>
<td>?</td>
<td>?</td>
</tr>
{{/compare}}複製代碼
//註冊一個比較大小的Helper,判斷v1是否大於v2
Handlebars.registerHelper("compare",function(v1,v2,options){
if(v1>v2){
//知足添加繼續執行
return options.fn(this);
}else{
//不知足條件執行{{else}}部分
return options.inverse(this);
}
});複製代碼
Handlebars.registerHelper("addOne",function(index,options){
return parseInt(index)+1;
});複製代碼
<label for="checkbox-2-{{addOne @index}}"></label>複製代碼
Handlebars.registerHelper("compare",function(v1,v2,options){
if(v1>v2){
//知足添加繼續執行
return options.fn(this);
}else{
//不知足條件執行{{else}}部分
return options.inverse(this);
}
});複製代碼
{{#compare age 20}}複製代碼
{{#if name.xxx}},這樣寫就假設name屬性是一個map,檢測name屬性中是否包含xxx屬性。複製代碼
{{#sort ages id="ages-list" class="con" }}
<span>{{@name}}:{{this}}</span>
{{/sort}}複製代碼
//上面的信息在下面的options裏
Handlebars.registerHelper("sort",function(context,options){
var i = 0,str="<div id="+ options.hash.id +" class="+ options.hash.class +">";
for(;i<context.length;i++){
str+=options.fn(context[i],{data:{name:options.data[i]}});
}
str+="</div>";
return str;
}); 複製代碼
- data:能夠在渲染模板時,將其傳進去,如template(context, {data: data}) 。(//這裏後面會涉及)
- hash : 保存寫模板時,能夠將一些值以key-value對的形式傳進去,好比上面的div裏有ID 和 classs屬性,這兩個都是鍵值對,都會存在options.hash中,這裏咱們能夠當作是map
- fn : 方法,官方解釋說「options.fn的能夠被認爲是被編譯過的普通handlebars模板,它的調用的執行環境被認爲是‘this’,因此你能夠把this做爲執行上下文去調用它」,這裏存放了上面那個div中的閉環體。什麼是閉環體?所謂閉環體就是有開有閉,上面div裏那個span就是閉環體,<zzz></zzz>形如這樣的就是閉環體。
- inverse : 給if的block的else來用的.說白了就是給{{else}}使用的。複製代碼
var template = Handlebars.compile($("#people-template").html());
var temp = {ages:[23,24,56,64]}
var result = template(temp,{data:["tom","jak","lili","jim"]});
/*result:
<div id="ages-list" class="con">
<span>jak:24</span>
<span>lili:56</span>
<span>jim:64</span>
</div>複製代碼
var result = template(temp,{data:["tom","jak","lili","jim"]});
就是在渲染時傳入data數據.正常狀況下傳遞一個json數據,當傳兩個json了,第二個json裏的數據就是替換模板中的佔位符的({{@...}}這種寫法的佔位符). {{#each comments}}
<div class="comment">
<h2>{{subject}}</h2>
{{{body}}}
</div>
{{/each}}複製代碼
Handlebars.registerHelper('each', function(context, options) {
var ret = "";
for(var i=0, j=context.length; i<j; i++) {
ret = ret + options.fn(context[i]);
}
return ret;
});複製代碼
{{#list nav}}
<a href="{{url}}">{{title}}</a>
{{/list}}複製代碼
Handlebars.registerHelper('list', function(context, options) {
var ret = "<ul>";
for(var i=0, j=context.length; i<j; i++) {
ret = ret + "<li>" + options.fn(context[i]) + "</li>";
}
return ret + "</ul>";
});複製代碼
{{#each nav ~}}
<a href="{{url}}">
{{~#if test}}
{{~title}}
{{~^~}}
Empty
{{~/if~}}
</a>
{{~/each}}複製代碼
{
nav: [
{url: 'foo', test: true, title: 'bar'},
{url: 'bar'}
]
}複製代碼
<a href="foo">bar</a><a href="bar">Empty</a>複製代碼
掃碼關注公衆號,不按期更新干活ui
加入戰隊this