Javascript 在单个xHttpRequest中打包多个jQuery模板的最佳方法？

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

我还是想听一听 关于这样做的其他想法。这个 上面链接的文章要求 返回的模板字符串将被删除 插入到DOM中。似乎 将DOM排除在外将是错误的 非常理想，并且在服务器上的开销更少 浏览器想象一个大页面，上面有 多个组合模板可能会 不习惯。虽然，也许是因为 模板包装在脚本中 标记，每个模板只有一个DOM项？来吧，我们走吧 听到一些想法

使用，将多个相关的相对较小的模板组合在一起的最佳方式是什么？每个模板是否需要一个

标记？如果通过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>

“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>

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

及

---

…让我知道你的想法。。。你会怎么做？

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

你可以把它放在任何你想贴标签的地方。就像他说的，只需输入您需要的模板，或者可能包括两个模板：一个是带有常用项的“基本”模板，第二个是带有模板引用{{tmpl}的特定于页面的模板

---

这接近答案吗？；-）

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

我没有使用插件“jquery template libs”的经验，但是有一个特别的轻量级javascript模板插件几乎已经成为标准，并且与jquery配合得非常好，它可能比JTL、Mustache更适合执行此任务：

它有一种叫做“部分”的东西，本质上是一种在另一个模板中包含较小模板的方法。听起来这对你有很大帮助

除此之外，还有一个名为ICanHaz.js的库：

ICanHaz从本质上扩展了Mustach，使其包含模板的内置功能，并且工作得非常好

---

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

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

---

如果您决定研究如何使用它们，那么我建议您使用它们来构建它们。

我喜欢您的更新中引用的文章，只是假设除非将模板插入DOM，否则无法缓存模板。从

要在使用从字符串（而不是从页面中的内联标记）获得的标记时缓存模板，请使用

$.template（name，markup）

创建命名模板以供重用。请参阅

使用这一点，我们可以构建一个javascript模板管理系统，允许我们在保持DOM干净的同时一次加载所需数量的模板。在客户端上，按名称保留模板对象的散列。您可以在这里使用您最喜欢的基于对象的javascript模式，但我认为其结构可能如下所示：

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

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

<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>

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

然后，构建卸载机制以释放内存：

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

---

最重要的是，您现在有了一种存储多个模板的方法，因此可以发出如下请求：

$.get（'/TemplateManagement/Render'，arrayOfTemplateNamesToLoad，LoadManyTemplatesAccess）

一次加载多个模板。我们唯一需要的是一个控制器

TemplateManagement

，它将模板名称数组作为输入，并返回将模板名称与其标记配对的JSON。有几种方法可以做到这一点，但在我看来，最方便的方法是为每个模板定义局部视图。在ASP.NET MVC 3中，可以使用和

RenderPartial

将每个模板的标记发送到JSON响应中。您可以将局部视图命名为与模板相同的名称，或者以某种自定义方式映射名称。

我还可以使用分隔符，从单个响应中拆分一组模板。但是对于jquery/templates，必须有一种更优雅的方法来实现这一点——我是否遗漏了模板文档中的某些内容？我想我会在这里关注您。。。您是否只是想解决这样一个问题：首先必须将所有模板加载到呈现页面中，然后只选择您需要的少数模板？没错。我需要根据需要动态加载模板。我添加了一种方法，我认为这种方法足够灵活，可以处理您的所有需求，让我知道您的想法，我们可以一起工作。您最终就是这么做的吗？服务器端页面决定和响应。是否写入模板文件？我也在为这个问题寻找一个好的、干净的解决方案，我还没有，但我打算稍后再回去重新设计（现在必须推出这个项目）。我希望它能让我只加载那个特定页面所需的东西，但现在它的性能已经足够好了，所以它工作得很好，只是不够优雅。你知道我的意思吗？耶，拍着自己的背。这是我最喜欢的答案。总有一天会流行起来的

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