03-each基本循環(huán)的使用方法

2024-04-27 15:07:30

字體：大中小

供稿：網(wǎng)友

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <META http-equiv=Content-Type content="text/html; charset=utf-8"> 5     <title>each-基本循環(huán)使用方法 - by 楊元</title> 6   </head> 7   <body> 8     <h1>each-基本循環(huán)使用方法</h1> 9     <!--基礎(chǔ)html框架-->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     <!--Handlebars.js模版-->28     <!--Handlebars.js模版放在script標(biāo)簽中，保留了html原有層次結(jié)構(gòu),模版中要寫一些操作語(yǔ)句-->29     <!--id可以用來(lái)唯一確定一個(gè)模版,type是模版固定的寫法-->30     <script id="table-template" type="text/x-handlebars-template">31       {{#each student}}32         <tr>33           <td>{{name}}</td>34           <td>{{sex}}</td>35           <td>{{age}}</td>36         </tr> 37       {{/each}}38     </script>39     40     <!--進(jìn)行數(shù)據(jù)處理、html構(gòu)造-->41     <script type="text/javascript">42       $(document).ready(function() {43         //模擬的json對(duì)象44         var data = {45                     "student": [46                         {47                             "name": "張三",48                             "sex": "0",49                             "age": 1850                         },51                         {52                             "name": "李四",53                             "sex": "0",54                             "age": 2255                         },56                         {57                             "name": "妞妞",58                             "sex": "1",59                             "age": 1860                         }61                     ]62                 };63         64         //注冊(cè)一個(gè)Handlebars模版，通過(guò)id找到某一個(gè)模版，獲取模版的html框架65         //$("#table-template").html()是jquery的語(yǔ)法，不懂的童鞋請(qǐng)惡補(bǔ)。。。66         var myTemplate = Handlebars.compile($("#table-template").html());67         68         //將json對(duì)象用剛剛注冊(cè)的Handlebars模版封裝，得到最終的html，插入到基礎(chǔ)table中。69         $('#tableList').html(myTemplate(data));70       });71     </script>72   </body>73 </html> 
     通過(guò)閱讀本例，讀者已經(jīng)掌握Handlebars.js一個(gè)重要特性：循環(huán)。#each可以理解成循環(huán)命令，循環(huán)的是json對(duì)象中的student屬性。對(duì)于每次循環(huán)，都可以讀出里邊的name、sex、age屬性。

上一篇：Vue.js插值

下一篇：05-each嵌套