2012-11-21 10 views
7

Czytam i próbuję zrozumieć przykład szablonu Jquery.zrozumienie szablonu 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> 

W tym przykładzie programu nie jestem w stanie zrozumieć, o:

/* Konwersja ciąg znaczników w nazwie szablonu, wskazanej przez {{tmpl}} tag */

gdy wzywamy: $ („#movieTemplate”) .tmpl (filmy) to wywołanie szablonu na tym wzywamy funkcję szablonu z filmami wejściowych i dołączanie że do movieslistid

jeśli usunąć kod

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

to nie działa. Czy możesz wyjaśnić, dlaczego potrzebujemy tego i co tu robi, jak to, co robi:/* Konwertuj łańcuch znaczników na nazwany szablon, znaczy i wszystko ..

Próbowałem przeczytać i stwierdziłem, że nie otrzymuję tego wyjaśnić

Odpowiedz

9

zawiera odniesienie do szablonu o nazwie "titleTemplate", szablon, który nie został jeszcze zdefiniowany:

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

linia ta określa, że ​​brakujący szablon:

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

Jest to inny sposób powiedzenia

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

W istocie przykład pokazuje, że można definiować szablony dwojako

  • deklaratywnie w kodzie źródłowym HTML, jak <script type="text/x-jquery-tmpl"> elementów
  • programowo z ciągów przez $.template()
+0

Dzięki za wyjaśnienie –