使用jQuery+huandlebars中with應用及with+this應用

時間 2019-12-02

標籤使用 jquery+huandlebars jquery huandlebars 應用 with+this 欄目 JQuery 简体版

原文原文鏈接

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

with基本應用html

<!DOCTYPE html>
<html>
  <head>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>with-進入到某個屬性(進入到某個上下文環境) - by 楊元</title>
  </head>
  <body>
    <h1>with-進入到某個屬性(進入到某個上下文環境)</h1>
    <!--基礎html框架-->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <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 this}}
        <tr>
          <td>{{name}}</td>
          <td>{{sex}}</td>
          <td>{{age}}</td>
          <td>
            {{#with favorite}}
              {{#each this}}
                <p>{{name}}</p>
              {{/each}}
            {{/with}}
          </td>
        </tr> 
      {{/each}}
    </script>
    
    <!--進行數據處理、html構造-->
    <script type="text/javascript">
      $(document).ready(function() {
        //模擬的json對象
        var data = [
                        {
                            "name": "張三",
                            "sex": "0",
                            "age": 18,
                            "favorite":
                            [
                              {
                                "name":"唱歌"
                              },{
                                "name":"籃球"
                              }
                            ]
                        },
                        {
                            "name": "李四",
                            "sex": "0",
                            "age": 22,
                            "favorite":
                            [
                              {
                                "name":"上網"
                              },{
                                "name":"足球"
                              }
                            ]
                        },
                        {
                            "name": "妞妞",
                            "sex": "1",
                            "age": 18,
                            "favorite":
                            [
                              {
                                "name":"電影"
                              },{
                                "name":"旅遊"
                              }
                            ]
                        }
                    ];
        
        //註冊一個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>

with+this應用java

<!DOCTYPE html>
<html>
  <head>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>with-終極this應用 - by 楊元</title>
  </head>
  <body>
    <h1>with-終極this應用</h1>
    <!--基礎html框架-->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <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 this}}
        <tr>
          <td>{{name}}</td>
          <td>{{sex}}</td>
          <td>{{age}}</td>
          <td>
            {{#with favorite}}
              {{#each this}}
                <p>{{this}}</p>
              {{/each}}
            {{/with}}
          </td>
        </tr> 
      {{/each}}
    </script>
    
    <!--進行數據處理、html構造-->
    <script type="text/javascript">
      $(document).ready(function() {
        //模擬的json對象
        var data = [
                        {
                            "name": "張三",
                            "sex": "0",
                            "age": 18,
                            "favorite":
                            [
                              "唱歌",
                              "籃球"
                            ]
                        },
                        {
                            "name": "李四",
                            "sex": "0",
                            "age": 22,
                            "favorite":
                            [
                              "上網",
                              "足球"
                            ]
                        },
                        {
                            "name": "妞妞",
                            "sex": "1",
                            "age": 18,
                            "favorite":
                            [
                              "電影",
                              "旅遊"
                            ]
                        }
                    ];
        
        //註冊一個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>

相關標籤/搜索

每日一句

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