zoukankan      html  css  js  c++  java
  • jsrender for 标签

    for object使用

    1.为进入object中直接使用其中的属性

    <div id="result"></div>
    
    <script id="theTmpl" type="text/x-jsrender">
    <div>
      {{:name}} lives in
      {{for address}}
        <b>{{>city}}</b>
      {{/for}}
    </div>
    </script>
    
    <script>
    var data = [
      {
        "name": "Pete",
        "address": {
          "city": "Seattle"
        }
      },
      {
        "name": "Heidi",
        "address": {
          "city": "Sidney"
        }
      }
    ];
    
    var template = $.templates("#theTmpl");
    
    var htmlOutput = template.render(data);
    
    $("#result").html(htmlOutput);
    </script>
     
     

    2.切入模版

    <body>
    
    <script id="peopleTemplate" type="text/x-jsrender">
      <div>
        {{:name}} lives in {{for address tmpl="#addressTemplate" /}}<!--切入其他模版-->
      </div>
    </script>
    
    <script id="addressTemplate" type="text/x-jsrender">
      <b>{{>city}}</b>
    </script>
    
    <div id="result"></div>
    
    <script>
    var people = [
      {
        "name": "Pete",
        "address": {
          "city": "Seattle"
        }
      },
      {
        "name": "Heidi",
        "address": {
          "city": "Sidney"
        }
      }
    ];
    
    var html = $("#peopleTemplate").render(people);
    
    $("#result").html(html);
    </script>
    
    </body>

     2.for array的使用,为循环标签

    <body>
    
    <div id="result"></div>
    
    <script id="theTmpl" type="text/x-jsrender">
    <b>{{:title}}</b>
    <ul>
      {{for members}}
          <li>{{:name}} lives in <b>{{:address.city}}</b></li>
      {{/for}}
    </ul>
    </script>
    
    <script>
    var data = {
      "title": "The A team",
      "members": [
        {
          "name": "Pete",
          "address": {
            "city": "Seattle"
          }
        },
        {
          "name": "Heidi",
          "address": {
            "city": "Sidney"
          }
        }
      ]
    };
    
    var template = $.templates("#theTmpl");
    var htmlOutput = template.render(data);
    $("#result").html(htmlOutput);
    </script>
    
    </body>

    3.for标签还支持else的判断

    else:表示for中的没有值循环或者为空,则进入

    {{for members}}
        Name: {{:name}}
    {{else}}
        No members...
    {{/for}}

    Conditional blocks: — Render the block content of the {{for}} tag (or referenced template) if the object is defined and is not an empty array, otherwise render the {{else}} block (or template)

    <body>
    
    <div id="result"></div>
    
    <script id="theTmpl" type="text/x-jsrender">
    <b>{{:title}}</b>
    <ul>
      {{for members}}
        <li><b>Name:</b> {{:name}}</li>
      {{else}}
        <li>No members!</li>
      {{/for}}
    </ul>
    </script>
    
    <script>
    var data = [
      {
        "title": "The A team",
        "members": []
      },
      {
        "title": "The B team",
        "members": [
          {
            "name": "Pete"
          }
        ]
      }
    ];
    
    var template = $.templates("#theTmpl");
    
    var htmlOutput = template.render(data);
    
    $("#result").html(htmlOutput);
    </script>
    
    </body>
  • 相关阅读:
    学习4412开发板gdb和gdbserver的调试
    S5P4418开发板android源码下uboot和内核缺省文件的配置
    IMX6开发板Qtopia2.2.0开发环境搭建以及编译镜像
    IMX6Q开发板LinuxQT挂载U盘及TF卡
    没有更好的,五种操作系统助力研发,IMX6开发板做得到
    iTOPiMX6UL开发板MiniLinuxCAN测试使用文档
    Exynos4412开发板网络同一网段
    分享几个4412开发板新录制的视频,不是VIP也能看
    itop4412开发版安卓系统卸载默认apk使用文档
    一个总经理的11个经典面试问题
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4573557.html
Copyright © 2011-2022 走看看