Template trong Jquery

Ngôn ngữ bên Server thì có PHP, ASP.NET, JAVA.
Thế còn bên Client? Cơ bản là nó có 3 ngôn ngữ chính: HTML, CSS và JavaScript.
Đúng là học Javascript là cực hình đối với ai mới làm quen. Tại sao để chọn 1 phần tử, cần quá nhiều dòng lệnh như vậy. Và Jquery ra đời để khắc phục sự dài dòng và xử lý nhanh nhiều tác vụ. Bạn có thể dễ dàng thêm sửa xóa, tạo hiệu ứng với JQuery.
Đặc biệt, trong JQuery có thêm phần Ajax, làm cho ứng dụng của bạn thêm phần linh động.
Vấn đề đặt ra, là khi tải dữ liệu trên server về, dữ liệu là dạng JSON và việc thêm nó vào thẻ HTML là vô cùng khó khăn. (Không khó lắm nhưng việc ghép chuỗi làm hạn chế khả năng tư duy lập trình)
Ví dụ:

var s = "<tr> <td>" + o.Name + "</td>&tl;td>" + o.Author + "</td></tr>"
$("#idTable").append(s);

Rất may mắn là trong Jquery có thêm tính năng tạo Template trong trang Html. Nó cho phép bạn tạo 1 template nhỏ và kết nối (binding) tới đối tượng JSON. Và sau đó, bạn có thể thêm vào bất cứ chỗ nào trong thẻ body mà bạn muốn, ví dụ trong trường hợp này là append vào table.
Đầu tiên bạn tải version mới nhất của jquery tại đây và thêm 1 plugin nhỏ để sử dụng template Jquery tại đây
Trong trang Html, bạn tạo template như sau:

<script src="/Scripts/jquery-1.7.1.js" type="text/javascript">
<script src="/Scripts/jquery.tmpl.min.js" type="text/javascript">

<script id="defaultTemplate" type="text/x-jquery-tmpl">
<tr>
    <td>${Name}</td>
    <td>${Author}</td>
</tr>    
</script>

Chú ý: Tôi đặt script id là để đánh dấu thẻ script nào cần xài (template cần xài) loại là text/x-jquery-tmpl.
${} là báo cho Jquery biết tại chỗ đó sẽ đặt dữ liệu của đối tượng Json vào (binding). Tên đặt trong dấu {} là tên property của đối tượng JSON.
Điều đó có nghĩa là trong trang html, tôi muốn hiển thị dạng:

<table id="myTable">
    <tbody>
  <tr>
   <td>Name</td>
   <td>Author</td>
  </tr> 
    </tbody>
</table>

Để load template đã định nghĩa, ta sử dụng hàm .tmpl()

$('#defaultTemplate').template('myTemplate');

Gắn datasource vào myTemplate và thêm vào Table.

function AddData(mydata) {
        //load Template và đặt tên nó là myTemplate
        $("#defaultTemplate").template('myTemplate');
        //binding (kết nối) dữ liệu JSON vào myTemplate và thêm vào myTable
        $.tmpl('myTemplate', mydata).appendTo('#myTable');
    }

Bạn có thể tải đầy đủ source code tại: mediafire 
Lưu ý: Project này mình làm bằng ASP.NET MVC4 bản Developer Preview. Bạn có thể tải tại trang http://www.asp.net/