zoukankan html css js c++ java

jsRender 循环for 和props

jsrender提供多重循环方式

1.{{for array}}循环数组

2.{{props object}}循环对象

1.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>

2.props object的使用

循环object中的所有属性

<body>

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">
<table><tbody>
  <tr><td><b>name:</b> {{:name}}</td></tr>
  <tr><td> 
  {{props address}}
    <b>{{>key}}:</b> {{>prop}}<br/>
  {{/props}}
  </td></tr>
</tbody></table>
</script>

<script>
var data = [
  {
    "name": "Pete",
    "address": {
      "street": "12 Pike Place",
      "city": "Seattle",
      "ZIP": "98101"
    }
  },
  {
    "name": "Heidi",
    "address": {
      "street": "5000 Broadway",
      "city": "Sidney",
      "country": "Australia"
    }
  }
];

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

</body>

查看全文

相关阅读:
printcap
browser-ua
PHP 开发 APP 接口学习笔记与总结
 Java实现 LeetCode 72 编辑距离
 Java实现 LeetCode 72 编辑距离
 Java实现 LeetCode 72 编辑距离
 Java实现 LeetCode 71 简化路径
 Java实现 LeetCode 71 简化路径
 Java实现 LeetCode 71 简化路径
 Java实现 LeetCode70 爬楼梯

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