使用jQuery+huandlebars遍歷中if判斷

時間 2019-12-02

標籤使用 jquery+huandlebars jquery huandlebars 遍歷判斷欄目 JQuery 简体版

原文原文鏈接

兼容ie8（很實用，複製過來，僅供技術參考，更詳細內容請看源地址：http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）javascript

<!DOCTYPE html>
<html>
  <head>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>if-判斷的基本用法 - by 楊元</title>
  </head>
  <body>
    <h1>if-判斷的基本用法</h1>
    <!--基礎html框架-->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性別</th>
          <th>年齡</th>
        </tr>
      </thead>
      <tbody id="tableList">
        
      </tbody>
    </table>
    
    <!--插件引用-->
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
    
    <!--Handlebars.js模版-->
    <!--Handlebars.js模版放在script標籤中，保留了html原有層次結構,模版中要寫一些操做語句-->
    <!--id能夠用來惟一肯定一個模版,type是模版固定的寫法-->
    <script id="table-template" type="text/x-handlebars-template">
      {{#each student}}
        {{#if name}}
          <tr>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
          </tr>
        {{/if}}
      {{/each}}
    </script>
    
    <!--進行數據處理、html構造-->
    <script type="text/javascript">
      $(document).ready(function() {
        //模擬的json對象
        var data = {
                    "student": [
                        {
                            "name": "張三",
                            "sex": "0",
                            "age": 18
                        },
                        {
                            "sex": "0",
                            "age": 22
                        },
                        {
                            "name": "妞妞",
                            "sex": "1",
                            "age": 18
                        }
                    ]
                };
        
        //註冊一個Handlebars模版，經過id找到某一個模版，獲取模版的html框架
        //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。
        var myTemplate = Handlebars.compile($("#table-template").html());
        
        //將json對象用剛剛註冊的Handlebars模版封裝，獲得最終的html，插入到基礎table中。
        $('#tableList').html(myTemplate(data));
      });
    </script>
  </body>
</html>

相關標籤/搜索

每日一句

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