了解jQuery模板 [英] understanding Jquery template
问题描述
我正在阅读并试图理解Jquery模板示例.
I am reading and trying to understand a Jquery template example.
<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>
在此示例程序中,我无法理解以下内容:
In this example program I am not able to understand about the:
/*将标记字符串转换为命名模板, 由{{tmpl}}标签*/
/* Convert the markup string into a named template, referenced by the {{tmpl}} tag */
当我们打电话给: $("#movieTemplate").tmpl(电影),它正在调用模板,我们正在使用输入电影来调用模板函数,并将其附加到movielistid上
when we call: $( "#movieTemplate" ).tmpl( movies ) it is calling the template on that we are calling the template function with input movies and appending that to movieslistid
如果我删除代码
$.template( "titleTemplate", "<tr class='title'><td>${Name}</td></tr>" );
它不起作用.您能否解释一下为什么我们需要它,以及它在做什么,例如:/*将标记字符串转换为命名模板,均值和全部..
it does not work. Can you please explain why we need this and what is it doing here like what does: /* Convert the markup string into a named template, mean and all..
我尝试过在线阅读,发现我没有弄清楚这一点
I tried to readonline and found that I am not getting this clarified
推荐答案
其中包含对名为"titleTemplate"
的模板的引用,该模板尚未定义:
This contains a reference to a template named "titleTemplate"
, a template which has not yet been defined:
<script id="movieTemplate" type="text/x-jquery-tmpl">
{{tmpl "titleTemplate"}}
<tr class="detail"><td>Director: ${Director}</td></tr>
</script>
此行定义缺少的模板:
$.template( "titleTemplate", "<tr class='title'><td>${Name}</td></tr>" );
这是另一种说法
<script id="titleTemplate" type="text/x-jquery-tmpl">
<tr class='title'><td>${Name}</td></tr>
</script>
本质上,该示例表明您可以通过两种方式定义模板
In essence the example shows that you can define templates in two ways
- 在HTML源代码中声明为
<script type="text/x-jquery-tmpl">
元素 - 以编程方式从字符串通过
$.template()
- declaratively in the HTML source code, as
<script type="text/x-jquery-tmpl">
elements - programmatically from strings through
$.template()
这篇关于了解jQuery模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!