JQuery-Template

Bài đăng này đã không được cập nhật trong 7 năm

Giới thiệu về JQuery Template

1.JQuery template plugin

JQuery template plugin được phát triển bởi nhóm Microsoft ASP.NET với nhóm JQuery open source.Nó cho phép bạn hiện thị và thực thi dữ liệu ở trình duyệt.Ví dụ như bạn có thể sử dụng JQuery template để định dạng và hiển thị tập các bản ghi bạn truy vấn được thông qua Ajax JQuery template bao gồm .tmpl() ,.tmplItem() và.template() .

2.Tại sao phải sử dụng tempalting, jQuery.tmpl() ?

2.1 Tại sao phải sử dụng tempalting

-Không còn phải xâu chuỗi khi fill dữ liệu->dễ chỉnh sửa khi có thay đổi -Gửi HTML updates thông qua ajax là không hiệu quả -Tính toán và thông dịch nhanh hơn -Hiệu quả hơn khi làm nhiều việc trên trình duyệt

2.2 Tại sao phải sử dụng jQuery.tmpl

-JQuery có một thị trường chia sẻ lớn nhất của bất kỳ thư viện JS nào -JQuery.tmpl là một tempalting plugin chính thức -Được phát triển bởi Microsoft,theo MIT/GPL licence

3.Cách dùng

Ví dụ ví dụ ta có dữ liệu local tại trong trang html đơn giản là

 <!DOCTYPE html ">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 //declare libarary
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

 </head>

 <body>

 <div id="pageContent">

 <h1>film store</h1>

 <div id="filmsContainer"></div>

 </div>
   //create a template

 <script id="filmsTemplate" type="text/x-jQuery-tmpl">
 <div>
     <h2>${title}</h2>
     price: ${price}
 </div>

   </script>

    <script type="text/javascript">
 // Create an array of films
 var films = [
     { title: "Interstellar", price: 37.79,  },
     { title: "Guardians of the Galaxy ", price: 44.99},
     { title: "	Add to WatchlistJohn Wick", price: 4.00 }

 ];

 // Render the films using the template
 $("#filmsTemplate").tmpl(films).appendTo("#filmsContainer");

   </script>

 </body>

 </html>

2.Cách sử dụng các thẻ template

-${}

+Thường được sử dụng để chèn dữ liệu trên trang

ví dụ:

    //data

    var films={title:'the lord of the rings',author:{name:'J.R.R. Tolkien '}}

    //tempalte

    <div>

    <p>${films.title}</p>

    <p>author:${films.author.name}</p>

    </div>

+Ta có thể sử dụng câu lệnh tương tự {{=films.title}}.Trong một số trang không phải là html chẳng hạn jsp thì sẽ bị xung đột với ký tự $ cúa thư viện jstl thì câu lênh ${} sẽ không sử dụng được mà phải dùng câu lệnh thay thế ${{= }}

+Ta có thể gọi một function trong câu lệnh ${{ }}

ví dụ

    function concatString(a,b){return a+b};

    <div>

    ${concatString(films.tile)}

    </div>

-{{html}}

+Dùng để render ra nội dung đã được html,khi sử dung ${} sẽ hiển thị nguyên định dạng nếu có thẻ html thì nó cũng hiện ra cả thẻ html

ví dụ

    //tempalte

     <script id="filmsTemplate" type="text/x-jQuery-tmpl">
    <div>
        {{html title}}
        price: ${price}
    </div>
</script>

     //data

     var films = [
        { title: "<h1>Interstellar</h1>", price: 37.79,  },
        { title: "Guardians of the Galaxy ", price: 44.99},
        { title: "	Add to WatchlistJohn Wick", price: 4.00 }

    ];

-{{if}} / {{else}}

+Được sử dụng trong khi cần thực hiện một câu lệnh điều kiện trong template code

    <div>
   {{if price > 40}}
        <h2>${title}</h2>
        <h1 style="color:red;">price: ${price}</h1>
		{{else}}
		<h2>${title}</h2>
        <h1>price: ${price}</h1>
		{{/if}}
    </div>

-{{each}}

+Được sử dụng để lặp một mảng trong một template

    //data:

    var data = { films: ['Interstellar', 'Guardians of the Galaxy', 'Add to WatchlistJohn Wick'] };<!--
    //template
    {{each numbers}}
<p>${$index + 1}. Film ${$item}</p>
{{/each}}

-{{tmpl}}

+Được sử dụng để hiển thị dữ liệu ở template con(sub-tempalte)

var data = { name: 'Dave',cats: ['Mittens', 'Fluffy', 'Bob'] };
<script id='inner' type='text/x-jquery-tmpl'>
  <p>${$data}</p>
</script>
<script id='outer' type='text/x-jquery-tmpl'>
  <p>My name is ${name} and these are my cats:</p>
  {{tmpl(cats) '#inner'}}
</script>

Trên đây là một số giới thiệu về jquery-tmpl,hi vọng sẽ giúp được bạn phần nào trong quá trình học tập và làm việc

Tài liệu tham khảo

http://www.borismoore.com/2010/09/introducing-jquery-templates-1-first.html
http://stephenwalther.com/archive/2010/11/30/an-introduction-to-jquery-templates
http://skilldrick.co.uk/tmpl/#slide11

HTML5

Mục lục