<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/jsrender.js"></script>
<link href="scripts/demos.css" rel="stylesheet" />
<link href="scripts/movielist.css" rel="stylesheet" />
</head>
<body>
<script id="movieTemplate" type="text/x-jsrender">
<td>{{>~format(title, "upper")}}</td>//逗号，和“upper”之间一定要空一格
<td>{{for languages}}{{>~format(name, "lower")}}{{/for}}</td>
</script>
<table>
<thead>
<tr>
<th>Title</th>
<th>Languages</th>
</tr>
</thead>
<tbody id="movieList"></tbody>
</table>
<script type="text/javascript">
$.views.helpers({
format: function (val, format) {
var ret;
switch (format) {
case "upper": return val.toUpperCase();
case "lower": return val.toLowerCase();
}
}
});
var movie = {
title: "Eyes Wide Shut",
languages: [
{ name: "CHINA" },
{ name: "FRNDH" },
{ name: "HDGD" }
]
};
$("#movieList").html(
$("#movieTemplate").render(movie)
);
</script>
</body>
</html>