13

更新：经过另一天的研究，我发现当前的 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') );

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

4

4 回答 4

4

我喜欢你更新中引用的文章，除了假设你不能缓存模板，除非你将它们插入到 DOM 中。从jQuery.tmpl 文档中，

“要在使用从字符串（而不是从页面中的内联标记）获取的标记时缓存模板，请使用$.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 中，您可以使用此技术并将RenderPartial每个模板的标记发送到 JSON 响应中。您可以将部分视图命名为与模板相同的名称，或者以某种自定义方式映射名称。

于 2011-06-28T15:01:05.577 回答
2

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

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

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

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

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

http://icanhazjs.com/

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

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

于 2011-02-10T23:03:24.303 回答
2

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

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

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

这甚至接近答案吗？;-)

于 2011-01-04T21:26:47.100 回答
0

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

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

于 2011-06-28T14:05:04.733 回答