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>

查看全文

相关阅读:
select、poll和epoll比较
 TCP建立连接和释放连接过程
 字符串匹配KMP算法（转自阮一峰）
Centos7升级gcc版本方法之一使用scl软件集
 网易mumu模拟器配置文件和修改adb port位置
 Java中基本数据类型
 Java成员变量和局部变量
 Java程序运行机制
 java虚拟机JVM
Jre和Jdk的区别?

原文地址：https://www.cnblogs.com/hwaggLee/p/4573557.html