Dari post sebelumnya, telah saya bahas mengenai ASP.NET Ajax 4.0 Client Template. Pada tulisan tersebut, saya bahas binding data tanpa koding javascript sedikitpun. Dengen client template memang sangat membatu dalam proses binding di sisi client. Binding tidak hanya bisa dilakukan secara declarative seperti pada post sebelumnya. Ada kalanya perlu dilakukan binding secara programming dengan JavaScript. Untuk melakukan binding dengan JavaScript, langkah persiapan yang dilakukan sama seperti pada declarative binding. Perbedaannya pada bagaimana cara membinding data dari datasource ke template.
Berikut saya jelaskan apa yang harus dilakukan untuk client binding dengan JavaScript. Kita asumsikan service dan template yang digunakan sama seperti pada post sebelumnya.
Pada halaman HTMl tidak perlu dideklarasikan XML namespace baru seperti pada metode declarative binding. Template masih tetap sama, hanya attribute sys:attach, dataview:serviceuri dan dataview:query tidak perlu ditulis lagi.
<body>
<div>
<table border="1">
<thead>
<tr>
<td>Symbol</td>
<td>Quote</td>
<td>Change</td>
<td>Day</td>
<td>Time</td>
</tr>
</thead>
<tbody id="stockListView" class="sys-template">
<tr>
<td>{{Symbol}}</td>
<td>{{Quote}}</td>
<td>{{Change}}</td>
<td>{{Day}}</td>
<td>{{Time}}</td>
</tr>
</tbody>
</table>
</div>
</body>
Selanjutnya tinggal buat binding data dengan JavaScript. Attribute sys:attach, dataview:serviceuri dan dataview:query yang sebelumnya ditulis di deklarasi tag, sekarang digantikan dengan JavaScript object.
<script type="text/javascript">
function pageLoad() {
$create(
Sys.UI.DataView,
{
serviceUri: "StockService.svc",
query: "GetStocks"
},
{},
{},
$get("stockListView")
);
}
</script>
Kita dapat melakukan binding kapan saja apakah setelah menekan tombol tertentu atau pada waktu pageLoad seperti contoh di atas. Contoh kode untuk client binding dengan JavaScript ini dapat diunduh dari link di bawah.