JsRender实用入门教程(3)

日期：2020-06-11 栏目：程序人生浏览：次

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义标签中使用else --- 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>

    
    <script type="text/x-jsrender">
      <tr>
        <td>{{:name}}</td>
        <td>
          {{!-- isShow为自定义标签，price是传入的参数，status是附加属性 --}}
          {{isShow price status=0}}
            {{:price}}
          {{else price status=1}}
            --
          {{/isShow}}
        </td>
      </tr>
    </script>

    <script>
      //数据源
      var dataSrouce = [{
        name: "苹果",
        price: 108
      },{
        name: "鸭梨",
        price: 370
      },{
        name: "桃子",
        price: 99
      },{
        name: "菠萝",
        price: 371
      },{
        name: "橘子",
        price: 153
      }];

      //自定义标签
      $.views.tags({
        "isShow": function(price){
          var temp=price+''.split('');

          if(this.tagCtx.props.status === 0){
            //判断价格是否为水仙花数，如果是，则显示，否则不显示
            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 "";
          }

        }
      });

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

JsRender实用入门教程(3)

相关推荐