09-with-終極this應(yīng)用

2024-04-27 15:07:34

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html> 2 <html> 3   <head> 4     <META http-equiv=Content-Type content="text/html; charset=utf-8"> 5     <title>with-終極this應(yīng)用 - by 楊元</title> 6   </head> 7   <body> 8     <h1>with-終極this應(yīng)用</h1> 9     <!--基礎(chǔ)html框架-->10     <table>11       <thead>12         <tr>13           <th>姓名</th>14           <th>性別</th>15           <th>年齡</th>16           <th>興趣愛好</th>17         </tr>18       </thead>19       <tbody id="tableList">20         21       </tbody>22     </table>23     24     <!--插件引用-->25     <script type="text/javascript" src="script/jquery.js"></script>26     <script type="text/Javascript" src="script/handlebars-1.0.0.beta.6.js"></script>27     28     <!--Handlebars.js模版-->29     <!--Handlebars.js模版放在script標(biāo)簽中，保留了html原有層次結(jié)構(gòu),模版中要寫一些操作語句-->30     <!--id可以用來唯一確定一個(gè)模版,type是模版固定的寫法-->31     <script id="table-template" type="text/x-handlebars-template">32       {{#each this}}33         <tr>34           <td>{{name}}</td>35           <td>{{sex}}</td>36           <td>{{age}}</td>37           <td>38             {{#with favorite}}39               {{#each this}}40                 <p>{{this}}</p>41               {{/each}}42             {{/with}}43           </td>44         </tr> 45       {{/each}}46     </script>47     48     <!--進(jìn)行數(shù)據(jù)處理、html構(gòu)造-->49     <script type="text/javascript">50       $(document).ready(function() {51         //模擬的json對象52         var data = [53                         {54                             "name": "張三",55                             "sex": "0",56                             "age": 18,57                             "favorite":58                             [59                               "唱歌",60                               "籃球"61                             ]62                         },63                         {64                             "name": "李四",65                             "sex": "0",66                             "age": 22,67                             "favorite":68                             [69                               "上網(wǎng)",70                               "足球"71                             ]72                         },73                         {74                             "name": "妞妞",75                             "sex": "1",76                             "age": 18,77                             "favorite":78                             [79                               "電影",80                               "旅游"81                             ]82                         }83                     ];84         85         //注冊一個(gè)Handlebars模版，通過id找到某一個(gè)模版，獲取模版的html框架86         //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補(bǔ)。。。87         var myTemplate = Handlebars.compile($("#table-template").html());88         89         //將json對象用剛剛注冊的Handlebars模版封裝，得到最終的html，插入到基礎(chǔ)table中。90         $('#tableList').html(myTemplate(data));91       });92     </script>93   </body>94 </html> 
 
     本例和上例不同之處在于favorite屬性中不再是map項(xiàng)，而是普通字符串，因此對于每個(gè)項(xiàng)，可以直接用{{this}}讀取，this代表當(dāng)前字符串。
     所以說，this非常靈活，讀者一定要大膽發(fā)揮想象力。
 
 
 
作者：楊元?dú)g迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處。