<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-2.0.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/mustache.js"></script>
<style>
table, table td, table th {
border: 1px solid red;
}
</style>
</head>
<body>
<!-- Şablonumuz -->
<script id="trSatir" type="text/template">
<thead>
<tr><th colspan="2">{{Derslik}}</th></tr>
</thead>
<tbody>
{{#Kisiler}}
<tr><td>{{Adi}}</td><td>{{Soyadi}}</td></tr>
{{/Kisiler}}
</tbody>
<tfoot>
<tr><th colspan="2">Öğr. Sayısı: {{OgrenciSayisi}}</th></tr>
</tfoot>
</script>
<!-- Şablonumuzun yapıştırılacağı yer -->
<table id="tbl">
</table>
<!-- Şablonumuzdan oluşturacağımız örnekler -->
<script>
var p4 = {
Kisiler: [{ Adi: "Murat", Soyadi: "Keskin" }, { Adi: "İlhan", Soyadi: "Mansız" }, { Adi: "Roberto", Soyadi: "Carlos" }],
Derslik: "101A",
OgrenciSayisi:function() {
return this.Kisiler.length;
}
};
var a = Mustache.to_html($("#trSatir").html(), p4);
$("#tbl").html(a);
</script>
</body>
</html>
