Question

  经过又一天挖掘后，
更新：   进入这个问题，我发现了   当前的jQuery模板库提供   没办法做到这一点。 this article   描述了一种好方法。

我还是想听听   关于这样做的其他想法。该   上面链接的文章要求   返回的模板字符串   插入DOM。似乎好像   将DOM排除在外   理想的，减少开销   浏览器。想象一个大页面，有   多个复合模板可能   不习惯。虽然，也许是因为   模板包装在脚本中   标签，每个模板只有一个DOM项目？来吧，我们来吧   听到一些想法...

使用jQuery template libs，将多个相关的相对较小的模板组合在一起的最佳方法是什么？您是否需要为每个单独的模板添加一个<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') );

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

Answer 1

我喜欢您更新中引用的文章，除非您假设除非将模板插入DOM，否则无法缓存模板。来自jQuery.tmpl documentation，

“要在使用从字符串中获取的标记（而不是从页面中的内联标记）缓存模板时，请使用$.template( name, markup )创建一个命名模板以供重用。请参阅jQuery.template()。”

使用它，我们可以构建一个javascript模板管理系统，允许我们在保持DOM清洁的同时一次加载尽可能多的模板。在客户端上，按名称保留模板对象的哈希值。你可以在这里使用你最喜欢的基于对象的javascript模式，但我认为结构可能是这样的：

templates[templateName] = {
    templateMarkup: markupFromServer,
    loadedAt: Date.now(),
    compiledTemplateFunction: jQuery.template( templateName, markupFromServer )
}

然后使用模板生成如下HTML：

templates['unique-name'].compiledTemplateFunction(inputData)

然后，构建一个卸载机制来释放内存：

function unload(templateName) {
    delete templates[templateName];
    delete jquery.template[templateName];
}

最重要的是，您现在有了一种存储多个模板的方法，因此您可以像$.get('/TemplateManagement/Render', arrayOfTemplateNamesToLoad, loadManyTemplatesSuccess)这样的请求一次加载多个模板。我们唯一需要的是一个控制器TemplateManagement，它将一组模板名称作为输入并返回JSON，将模板名称与其标记配对。有几种方法可以做到这一点，但在我看来，最方便的是为每个模板定义部分视图。在ASP.NET MVC 3中，您可以使用this technique和RenderPartial将每个模板的标记发布到JSON响应中。您可以将部分视图命名为与模板相同，也可以以某种自定义方式映射名称。

Answer 2

好的，我看过你在这篇文章中提到的文章。在我看来，他的方式可能是加载模板页面的最佳方式之一。我唯一不喜欢的是可能出现的异步问题，尤其是。如果你需要在async get返回之前立即做一些模板操作......加上在返回之前可能发生的任何绑定问题。在我做过的几个项目中，我使用他的“古老”SSI（服务器端包括），但我只是使用更简单的东西：

<% Response.WriteFile("this_page_template_file.html"); %>

您可以将它放在放置标签的任何位置。就像他说的那样，只需要输入你需要的模板，或者可能包含两个模板：一个是带有常用项目的“基础”模板，第二个模板带有模板引用的页面特定模板{{tmpl}}

这是否接近答案？ ; - ）

Answer 3

[首先，好问题。我喜欢这个话题]

我没有使用插件“jquery-template-libs”的经验，但是有一个特别轻量级的javascript模板插件几乎成为一个标准并且与jQuery非常相配，这可能比JTL更适合于任务，胡子：

https://github.com/janl/mustache.js

它有一种被称为“部分”的东西，它本质上是一种在较小的模板中包含较小模板的方法。听起来它会帮助你很多。

最重要的是有一个名为ICanHaz.js的库：

http://icanhazjs.com/

ICanHaz实质上扩展了Mustache，包括内置的模板功能，并且运行得非常好。

Mustache / ICanHaz允许您通过变量，json调用或使用标记添加模板。选择是你的。

Answer 4

我知道这是一个老问题，但你可能想看看Closure-Templates。它们提供了您所需的功能，并具有在编译时编译为JavaScript而不是在每个用户的浏览器中运行时的额外优势。

如果你决定考虑使用它们，那么我建议使用plovr来构建它们。

在单个Http请求中打包多个jQuery模板的最佳方法？

4 个答案: