2012-11-21 26 views
7

Tôi đang đọc và cố gắng hiểu một ví dụ về mẫu Jquery.hiểu mẫu Jquery

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "titleTemplate"}} 
    <tr class="detail"><td>Director: ${Director}</td></tr> 

</script> 

<table><tbody id="movieList"></tbody></table> 

<script> 
var movies = [ 
    { Name: "The Red Violin", Director: "François Girard" ,Producer : "ssss" }, 
    { Name: "Eyes Wide Shut", Director: "Stanley Kubrick" }, 
    { Name: "The Inheritance", Director: "Mauro Bolognini" } 
]; 

/* Convert the markup string into a named template, 
    referenced by the {{tmpl}} tag */ 
$.template("titleTemplate", "<tr class='title'><td>${Name}</td></tr>"); 

/* Render the movies data, using the named template as a nested template */ 
$("#movieTemplate").tmpl(movies).appendTo("#movieList"); 
</script> 

Trong chương trình ví dụ này tôi không thể hiểu về:

/* Chuyển đổi chuỗi đánh dấu vào một mẫu được đặt tên, tham chiếu bởi {{tmpl}} thẻ */

khi chúng tôi gọi: $ ("#movieTemplate") .tmpl (phim) nó đang gọi mẫu trên đó chúng tôi đang gọi chức năng mẫu với phim đầu vào và thêm vào phimlistid

nếu tôi xóa mã

$.template("titleTemplate", "<tr class='title'><td>${Name}</td></tr>"); 

nó không hoạt động. Bạn có thể giải thích lý do tại sao chúng tôi cần điều này và nó làm gì ở đây như thế nào:/* Chuyển đổi chuỗi đánh dấu thành một mẫu có tên, có nghĩa là và tất cả ..

Tôi đã cố gắng để đọc và thấy rằng tôi không nhận được điều này làm rõ

Trả lời

9

này chứa một tham chiếu đến một mẫu tên "titleTemplate", một mẫu mà vẫn chưa được xác định:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "titleTemplate"}} 
    <tr class="detail"><td>Director: ${Director}</td></tr> 
</script> 

dòng này quy định rằng thiếu mẫu:

$.template("titleTemplate", "<tr class='title'><td>${Name}</td></tr>"); 

Nó là một cách khác để nói

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class='title'><td>${Name}</td></tr> 
</script> 

Về bản chất ví dụ cho thấy rằng bạn có thể định nghĩa các mẫu theo hai cách

  • khai báo trong mã nguồn HTML, như <script type="text/x-jquery-tmpl"> yếu tố
  • lập trình từ chuỗi thông qua $.template()
+0

Cảm ơn lời giải thích –