Question

我正在阅读并尝试了解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}}标记* /

引用

当我们打电话时： $（“＃mobieTemplate”）。tmpl（电影）它正在调用模板，我们正在调用带有输入电影的模板功能并将其附加到movieslistid

如果我删除代码

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

它不起作用。你能解释一下为什么我们需要这个以及它在这里做了什么，例如：/ *将标记字符串转换为命名模板，均值和所有..

我尝试阅读并且发现我没有得到澄清

Answer 1

这包含对名为"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模板

1 个答案: