{{props}} tag

Response to StackOverflow question: https://stackoverflow.com/questions/20891156/jsrender-jsviews-how-to-loop-a-nested-json

by BorisMoore

HTML

<html>
<head>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//www.jsviews.com/download/jsrender.js"></script>
</head>
<body>

<script id="myTmpl" type="text/x-jsrender">
{{props nested}}
<div>
  <h1>Type: {{:prop.type}}</h1>
  {{props prop.items}}
    <p>Title: {{:prop.title}}</p>
  {{/props}}
</div>
{{/props}}
</script>

<div id="page"></div>
</body>
</html>

JavaScript

var myTmpl = $.templates("#myTmpl"),
data = {  
  nested: {
    page: {
      type: "X",
      items: {
        "0":{"title":"page - hello"},
        "1":{"title":"page - world"}
      }
    },
    post: {
      type: "Y",
      items: {
          "0":{"title":"post - hello"},
          "1":{"title":"post - world"}
      }
    }
  }
},
html = myTmpl.render(data);

$("#page").html(html);