Skip to content

Instantly share code, notes, and snippets.

@danimal141
Last active December 14, 2015 02:59
Show Gist options
  • Save danimal141/5018129 to your computer and use it in GitHub Desktop.
Save danimal141/5018129 to your computer and use it in GitHub Desktop.
try to use jsrender
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
li{
list-style:none;
}
</style>
</head>
<body>
<!-- テンプレートでul,liを生成して挿入する -->
<div id="list"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
          <!-- テンプレートの定義 -->
     <script id="template" type="text/x-jsrender">
<ul>
{{for personal_data}}
<li>{{>id}}:{{>name}}</li>
{{/for}}
</ul>
</script>
<script type="text/javascript">
$(function() {
var result = {
personal_data:[
{ id: "01", name: "山田" },
{ id: "02", name: "田中" },
{ id: "03", name: "山本" }
]
};
$("#list").html(
//テンプレートにデータを渡して、レンダリングする
$("#template").render(result)
);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment