jsrender for object

JSRender模板引擎示例

最新推荐文章于 2024-09-24 19:09:48 发布

转载最新推荐文章于 2024-09-24 19:09:48 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hwaggLee/p/4573535.html

本文展示了一个使用JSRender模板引擎的例子，通过该引擎将JSON数据渲染到HTML中，实现动态页面生成。示例中包含了数据绑定和循环渲染的代码，帮助理解JSRender的基本用法。

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