2014年4月14日 星期一

jsrender 範例

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="author" content="hua" />
    <script src="../js/jquery-1.8.1.min.js"></script>  
    <script src="../js/jsrender.min.js"></script>
    <style>
    .table201404120200{      
    }
 
    .table201404120200  td{
            border: solid 1px #CCCCCC;
        }
    </style>
</head>
<body>
    <div id="content20140412">      
    </div>
     
    <!--jsrender 樣板宣告  (主樣板)-->
    <script id="mainTmpl201404120200" type="text/x-jsrender">
        <table width="400px" class='table201404120200'>
            <thead>
                <tr ><th colspan="4">{{:title}}</th></tr>              
            </thead>
            <tbody>
                <tr>
                    <td>品名</td>
                    <td>數量</td>
                    <td>成本</td>
                    <td>售價</td>          
                    <td>價差</td> <!--呼叫 js method-->
                    <td>價差*2</td>
                    <td>index</td>
                    <td>color</td>
                </tr>  
                </tr>  
                {{for data tmpl="#reportTmpl201404120200" /}}
            </tbody>          
        </table>
    </script>
    <!--jsrender 樣板宣告   (子樣板)-->
    <script id="reportTmpl201404120200" type="text/x-jsrender">
        <tr>
            <td>{{: nam }}</td>
            <td>{{: quantity }}</td>
            <td>{{: cost }}</td>
            <td>{{: price}}</td>          
            <td>{{: ~method( price , cost)}}</td> <!--呼叫 js method-->
            <td>{{: ~method( price , cost) * 2}}</td> <!--呼叫 js method-->
            <td>{{: #index }}</td>
            {{if #index % 2 == 0}}
                <td style="background:#FF0080 ">#FF0080</td>
            {{else}}
                <td style="background:#FF8000 ">#FF8000</td>
            {{/if}}          
         
        </tr>      
    </script>
 
    <script>
       (function(){
        //資料,以資料驅動畫面
          var report = {
                title : '貨品資訊列表',
                data : [
                    {
                        nam : '精工表',
                        quantity : 2,
                        cost : 10000,
                        price : 30000,                      
                    },
                                        {
                        nam : '魯夫公仔',
                        quantity : 20,
                        cost : 100,
                        price : 399,                      
                    },
                                        {
                        nam : 'RX-78 RG 1/144',
                        quantity : 10,
                        cost : 500,
                        price : 1000,                      
                    }
                ]              
          };
       
           function difference(price, cost){
              return price - cost;
          }

       
          var html = $("#mainTmpl201404120200").render(report , {method : difference});
          //console.log(html);
          $('#content20140412').html(html);
       })();
    </script>
</body>

沒有留言:

張貼留言