我正在阅读并尝试理解 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>
在这个示例程序中,我无法理解:
/* 将标记字符串转换为命名模板, 由 {{tmpl}} 标签引用 */
当我们打电话时: $( "#movieTemplate").tmpl( movie ) 它正在调用模板,我们使用输入的 movie 调用模板函数并将其附加到 movielistid
如果我删除代码
$.template( "titleTemplate", "<tr class='title'><td>${Name}</td></tr>" );
它不起作用。您能否解释一下为什么我们需要这个以及它在这里做什么,例如:/* 将标记字符串转换为命名模板,意思是等等......
我尝试在线阅读,发现我没有得到澄清
最佳答案
这包含对名为 "titleTemplate"
的模板的引用,尚未定义的模板:
<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>
本质上,该示例表明您可以通过两种方式定义模板
- 在 HTML 源代码中以声明方式,如
<script type="text/x-jquery-tmpl">
元素 - 以编程方式从字符串到
$.template()
关于jquery - 理解Jquery模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13487647/