Autoría | Ultima modificación | Ver Log |
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="../demos.html">JsRender Demos</a><br />
<h3>Example Scenario: Using {{props}} tag to iterate through fields</h3>
<pre>
{{props details}}
<b>{{>key}}</b>: {{>prop}}
{{/props}}
</pre>
<table>
<thead><tr><th>Title</th><th>Details</th></tr></thead>
<tbody id="movieList1"></tbody>
</table>
<!--=================== Demo ===================-->
<!------------------ Templates ------------------>
<script id="movieTemplate" type="text/x-jsrender">
<tr>
<td>{{>title}}</td>
<td>
{{props details}}
<div>
<b>{{>key}}</b>: {{>prop}}
</div>
{{/props}}
</td>
</tr>
</script>
<!------------------ Script ------------------>
<script type="text/javascript">
var movies = [
{
title: "Meet Joe Black",
details: {
director: "John",
date: "1996",
language: "English"
}
},
{
title: "Eyes Wide Shut",
details: {
type: "Comedy",
date: "1940"
}
}
];
$("#movieList1").html(
$("#movieTemplate").render(movies)
);
</script>
</body>
</html>