小编use*_*905的帖子

更新:经过另一天深入研究这个问题后,我发现当前的jQuery模板库没有办法做到这一点.本文 介绍了一种很好的方法.

我仍然希望听到关于这样做的任何其他想法.上面链接的文章要求将返回的模板字符串插入DOM.似乎将DOM排除在外是理想的,并且浏览器的开销更少.想象一个大页面,其中包含多个可能无法使用的复合模板.虽然,也许是因为模板包装在脚本标签中,每个模板只有一个DOM项目？来吧,让我们听一些想法......

使用jQuery模板库,将多个相关的相对较小的模板组合在一起的最佳方法是什么？<script>每个模板需要一个标签吗？在通过AJAX动态提取这些模板的情况下呢？我能以某种方式组合这些模板吗？

考虑以下:

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

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

现在因为这两个模板非常密切相关(一个取决于另一个),将它们合并到一个AJAX调用中是有意义的,并立即同时获取它们.我有一些想法,但我想知道是否有共同/最好的方法来做到这一点？目前我拉入一大块HTML,然后执行.find()来获取模板的HTML特定值......例如:

var templatePackage = fancyAjaxCalltoGetTemplates();

"templatePackage"可能看起来像这样:

<div id="templatePkg"> 
    <div id="movieTemplate">
    {{tmpl "#titleTemplate"}}
      <tr class="detail"><td>Director: ${Director}</td></tr>
    </div>    

    <div id="titleTemplate">
    <tr class="title"><td>${Name}</td></tr>
    </div>
</div>

然后我可以这样做:

var titleTemplate = jQuery.template('titleTemplate', $(templatePackage).find('#titleTemplate') );

和

var movieTemplate = jQuery.template('movieTemplate', $(templatePackage).find('#movieTemplate') );

...让我知道你的想法...你会做什么？