JsRender實用入門教程

更新時間：2014年10月31日 10:08:18 投稿：shichen2014

這篇文章主要介紹了JsRender實用入門實例,包含了tag else使用、循環(huán)嵌套訪問父級數(shù)據(jù)等知識點,并提供了完整的實例下載,非常具有實用價值,需要的朋友可以參考下

本文是一篇JsRender的實用入門教程，實例講述了tag else使用、循環(huán)嵌套訪問父級數(shù)據(jù)等知識點。分享給大家供大家參考。具體如下：

前言

JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特點：

· 簡單直觀

· 功能強(qiáng)大

· 可擴(kuò)展的

· 快如閃電

這些特性看起來很厲害，但幾乎每個模版引擎，都會這么宣傳。。。

由于工作需要，小菜才接觸到此款模版引擎。使用了一段時間，發(fā)現(xiàn)它確實比較強(qiáng)大，但小菜覺得有些地方強(qiáng)大的過頭了，反倒讓人覺得很難理解。

另一方面，JsRender的官方文檔比較詳細(xì)，但其他資料出奇的少，遇到點什么問題，基本搜不到，不僅僅是相關(guān)問題搜不到，幾乎就是沒有結(jié)果。

再加上JsRender有些地方確實是不好理解，所以急需小菜分享一些“最佳實踐”。

基于最近一段時間的使用，小菜總結(jié)了一些實用經(jīng)驗，當(dāng)然，這些經(jīng)驗在官方文檔上是找不到的。

嵌套循環(huán)使用#parent訪問父級數(shù)據(jù)（不推薦）

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>嵌套循環(huán)使用#parent訪問父級數(shù)據(jù) --- by 楊元</title>

    <style>

    </style>

  </head>

  <body>

    <div>

      <table>

        <thead>

          <tr>

            <th width="10%">序號</th>

            <th width="10%">姓名</th>

            <th width="80%">家庭成員</th>

          </tr>

        </thead>

        <tbody id="list">

        </tbody>

      </table>

    </div>

    <script src="jquery.min.js"></script>

    <script src="jsviews.js"></script>

    <!-- 定義JsRender模版 -->

    <script id="testTmpl" type="text/x-jsrender">

      <tr>

        <td>{{:#index + 1}}</td>

        <td>{{:name}}</td>

        <td>

          {{for family}}

            {{!-- 利用#parent訪問父級index --}}

            <b>{{:#parent.parent.index + 1}}.{{:#index + 1}}</b>

            {{!-- 利用#parent訪問父級數(shù)據(jù)，父級數(shù)據(jù)保存在data屬性中 --}}

            {{!-- #data相當(dāng)于this --}}

            {{:#parent.parent.data.name}}的{{:#data}}

          {{/for}}

        </td>

      </tr>

    </script>

    <script>

      //數(shù)據(jù)源

      var dataSrouce = [{

        name: "張三",

        family: [

          "爸爸",

          "媽媽",

          "哥哥"

        ]

      },{

        name: "李四",

        family: [

          "爺爺",

          "奶奶",

          "叔叔"

        ]

      }];

      //渲染數(shù)據(jù)

      var html = $("#testTmpl").render(dataSrouce);

      $("#list").append(html);

    </script>

  </body>

</html>

嵌套循環(huán)使用參數(shù)訪問父級數(shù)據(jù)（推薦）

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>嵌套循環(huán)使用參數(shù)訪問父級數(shù)據(jù) --- by 楊元</title>

    <style>

    </style>

  </head>

  <body>

    <div>

      <table>

        <thead>

          <tr>

            <th width="10%">序號</th>

            <th width="10%">姓名</th>

            <th width="80%">家庭成員</th>

          </tr>

        </thead>

        <tbody id="list">

        </tbody>

      </table>

    </div>

    <script src="jquery.min.js"></script>

    <script src="jsviews.js"></script>

    <!-- 定義JsRender模版 -->

    <script id="testTmpl" type="text/x-jsrender">

      <tr>

        <td>{{:#index + 1}}</td>

        <td>{{:name}}</td>

        <td>

          {{!-- 使用for循環(huán)時，可以在后邊添加參數(shù)，參數(shù)必須以~開頭，多個參數(shù)用空格分隔 --}}

          {{!-- 通過參數(shù)，我們緩存了父級的數(shù)據(jù)，在子循環(huán)中通過訪問參數(shù)，就可以間接訪問父級數(shù)據(jù) --}}

          {{for family ~parentIndex=#index ~parentName=name}}

            <b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>

            {{!-- #data相當(dāng)于this --}}

            {{:~parentName}}的{{:#data}}

          {{/for}}

        </td>

      </tr>

    </script>

    <script>

      //數(shù)據(jù)源

      var dataSrouce = [{

        name: "張三",

        family: [

          "爸爸",

          "媽媽",

          "哥哥"

        ]

      },{

        name: "李四",

        family: [

          "爺爺",

          "奶奶",

          "叔叔"

        ]

      }];

      //渲染數(shù)據(jù)

      var html = $("#testTmpl").render(dataSrouce);

      $("#list").append(html);

    </script>

  </body>

</html>

自定義標(biāo)簽(custom tag)中使用else（強(qiáng)烈不推薦）

復(fù)制代碼代碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定義標(biāo)簽中使用else --- by 楊元</title>
    <style>
    </style>

</head>
<body>

    <div>
      <table>
        <thead>
          <tr>
            <th width="50%">名稱</th>
            <th width="50%">單價</th>
          </tr>
        </thead>
        <tbody id="list">

        </tbody>
      </table>
    </div>

    <script src="jquery.min.js"></script>
    <script src="jsviews.js"></script>

    
    <script id="testTmpl" type="text/x-jsrender">
      <tr>
        <td>{{:name}}</td>
        <td>
          {{!-- isShow為自定義標(biāo)簽，price是傳入的參數(shù)，status是附加屬性 --}}
          {{isShow price status=0}}
            {{:price}}
          {{else price status=1}}
            --
          {{/isShow}}
        </td>
      </tr>
    </script>

    <script>
      //數(shù)據(jù)源
      var dataSrouce = [{
        name: "蘋果",
        price: 108
      },{
        name: "鴨梨",
        price: 370
      },{
        name: "桃子",
        price: 99
      },{
        name: "菠蘿",
        price: 371
      },{
        name: "橘子",
        price: 153
      }];

      //自定義標(biāo)簽
      $.views.tags({
        "isShow": function(price){
          var temp=price+''.split('');

          if(this.tagCtx.props.status === 0){
            //判斷價格是否為水仙花數(shù)，如果是，則顯示，否則不顯示
            if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){
              return this.tagCtxs[0].render();
            }else{
              return this.tagCtxs[1].render();
            }
          }else{
            return "";
          }

        }
      });

      //渲染數(shù)據(jù)
      var html = $("#testTmpl").render(dataSrouce);
      $("#list").append(html);

    </script>

</body>
</html>

用helper代替自定義標(biāo)簽（推薦）

復(fù)制代碼代碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用helper代替自定義標(biāo)簽 --- by 楊元</title>
    <style>
    </style>

</head>
<body>

    <div>
      <table>
        <thead>
          <tr>
            <th width="50%">名稱</th>
            <th width="50%">單價</th>
          </tr>
        </thead>
        <tbody id="list">

        </tbody>
      </table>
    </div>

    <script src="jquery.min.js"></script>
    <script src="jsviews.js"></script>

    
    <script id="testTmpl" type="text/x-jsrender">
      <tr>
        <td>{{:name}}</td>
        <td>
          {{!-- 利用原生的if做分支跳轉(zhuǎn)，利用helper做邏輯處理 --}}
          {{if ~isShow(price)}}
            {{:price}}
          {{else}}
            --
          {{/if}}
        </td>
      </tr>
    </script>

    <script>
      //數(shù)據(jù)源
      var dataSrouce = [{
        name: "蘋果",
        price: 108
      },{
        name: "鴨梨",
        price: 370
      },{
        name: "桃子",
        price: 99
      },{
        name: "菠蘿",
        price: 371
      },{
        name: "橘子",
        price: 153
      }];

      //Helper
      $.views.helpers({
        "isShow": function(price){
          var temp=price+''.split('');
          if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){
            return true;
          }else{
            return false;
          }
        }
      });

      //渲染數(shù)據(jù)
      var html = $("#testTmpl").render(dataSrouce);
      $("#list").append(html);

    </script>

</body>
</html>

完整實例代碼點擊此處本站下載。

希望本文所述對大家JsRender程序設(shè)計的學(xué)習(xí)有所幫助。

您可能感興趣的文章: