Hướng dẫn jquery render html - jquery kết xuất html

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

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

    
    
    
    //declare libarary
    
    
   
    
   
    
   
    
   
   
    
   film store
   
    
   
   
    
      //create a template
   
    
   
       
   
    
   
    
   

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

    


    
${films.title}

    
author:${films.author.name}

    

+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};

    


    ${concatString(films.tile)}

    

-{{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

     

     //data

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

    ];

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

    


    ${concatString(films.tile)}

    

+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

    

   {{if price > 40}}
        
${title}
        
price: ${price}
		{{else}}
		
${title}
        
price: ${price}
		{{/if}}
    

-{{each}}

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

    //data:

    var data = { films: ['Interstellar', 'Guardians of the Galaxy', 'Add to WatchlistJohn Wick'] };