jsRender 循环for 和props-优快云博客

本文详细介绍了JSRender模板引擎中两种循环方式：forarray和propsobject的使用方法。forarray用于遍历数组，通过示例展示了如何循环显示数组中的成员信息；propsobject则用于遍历对象的所有属性，通过实例说明了如何展示对象属性细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>