JsRender实用入门教程(4)

//渲染数据
      var html = $("#testTmpl").render(dataSrouce);
      $("#list").append(html);
     
    </script>
   
  </body>
</html>

用helper代替自定义标签(推荐)

复制代码 代码如下:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>用helper代替自定义标签 --- by 杨元</title>
    <style>
    </style>
   
  </head>
  <body>
   
    <div>
      <table>
        <thead>
          <tr>
            <th>名称</th>
            <th>单价</th>
          </tr>
        </thead>
        <tbody>
         
        </tbody>
      </table>
    </div>
   
    <script src="https://www.jb51.net/jquery.min.js"></script>
    <script src="https://www.jb51.net/jsviews.js"></script>
   
    <!-- 定义JsRender模版 -->
    <script type="text/x-jsrender">
      <tr>
        <td>{{:name}}</td>
        <td>
          {{!-- 利用原生的if做分支跳转,利用helper做逻辑处理 --}}
          {{if ~isShow(price)}}
            {{:price}}
          {{else}}
            --
          {{/if}}
        </td>
      </tr>
    </script>
   
    <script>
      //数据源
      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;
          }
        }
      });

//渲染数据
      var html = $("#testTmpl").render(dataSrouce);
      $("#list").append(html);
     
    </script>
   
  </body>
</html>

完整实例代码点击此处本站下载

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgsgfy.html