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