Skip to main content

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/

Comments

Popular posts from this blog

Lập trình đa luồng với Task

Bài viết được đăng trên Jou Lập trình
Trong phiên bản .NET framework 4.0, Microsoft đã bổ sung nhiều thư viện hỗ trợ việc xử lý đa luồng (multi-threading), nhằm đơn giản hóa việc lập trình lẫn hiệu suất của chương trình. Trong bài viết này, tôi xin hướng dẫn các bạn sử dụng lớp System.Threading.Task.

Tìm hiểu về IdentityServer 4

Trong bài viết này, mình sẽ hướng dẫn các bạn làm quen với thư viện Identity Server 4, và tích hợp các service In-Memory của Identity Server 4 vào Project Web API trong .NET Core.

[ASP.NET MVC] Authentication và Authorize

Một trong những vấn đề bảo mật cơ bản nhất là đảm bảo những người dùng hợp lệ truy cập vào hệ thống. ASP.NET đưa ra 2 khái niệm: Authentication và Authorize
Authentication xác nhận bạn là ai. Ví dụ: Bạn có thể đăng nhập vào hệ thống bằng username và password hoặc bằng ssh.
Authorization xác nhận những gì bạn có thể làm. Ví dụ: Bạn được phép truy cập vào website, đăng thông tin lên diễn đàn nhưng bạn không được phép truy cập vào trang mod và admin.