因爲if功力不足引出的Helper

時間 2019-11-21

標籤因爲功力不足引出 helper 简体版

原文原文鏈接

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>因爲if功力不足引出的Helper - by 楊元</title>
6 </head>
7 <body>
8 <h1>因爲if功力不足引出的Helper</h1>
9 
10 <table>
11 <thead>
12 <tr>
13 <th>姓名</th>
14 <th>性別</th>
15 <th>年齡</th>
16 </tr>
17 </thead>
18 <tbody id="tableList">
19
20 </tbody>
21 </table>
22
23 
24 <script type="text/javascript" src="script/jquery.js"></script>
25 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
26
27 
28 
29 
30 <script id="table-template" type="text/x-handlebars-template">
31 {{#each student}}
32 {{#if name}}
33 {{#compare age 20}}
34 <tr>
35 <td>{{name}}</td>
36 <td>{{sex}}</td>
37 <td>{{age}}</td>
38 </tr>
39 {{else}}
40 <tr>
41 <td>?</td>
42 <td>?</td>
43 <td>?</td>
44 </tr>
45 {{/compare}}
46 {{/if}}
47 {{/each}}
48 </script>
49
50 
51 <script type="text/javascript">
52 $(document).ready(function() {
53 //模擬的json對象
54 var data = {
55 "student": [
56 {
57 "name": "張三",
58 "sex": "0",
59 "age": 23
60 },
61 {
62 "sex": "0",
63 "age": 22
64 },
65 {
66 "name": "妞妞",
67 "sex": "1",
68 "age": 18
69 }
70 ]
71 };
72
73 //註冊一個Handlebars模版，經過id找到某一個模版，獲取模版的html框架
74 //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。
75 var myTemplate = Handlebars.compile($("#table-template").html());
76
77 //註冊一個比較大小的Helper,判斷v1是否大於v2
78 Handlebars.registerHelper("compare",function(v1,v2,options){
79 if(v1>v2){
80 //知足添加繼續執行
81 return options.fn(this);
82 }else{
83 //不知足條件執行{{else}}部分
84 return options.inverse(this);
85 }
86 });
87
88 //將json對象用剛剛註冊的Handlebars模版封裝，獲得最終的html，插入到基礎table中。
89 $('#tableList').html(myTemplate(data));
90 });
91 </script>
92 </body>
93 </html>
<ul class="silder_list" >
<li>
<a href="http://yantai.changtu.com/" target="_blank">煙臺汽車南站電話</a>
</li>
</ul>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。