jQuery模板-我应该把它们放在哪里？

Question

目前，我有一个单一的html页面，其中有4个模板，并将有更多。是否可以将模板放在不同的文件中并“导入”它们？我可以在.js文件中定义它们吗？

我使用的是jQquery模板插件：http://api.jquery.com/category/plugins/templates/

我的代码看起来像示例！

Answer 1

我基本上同意这个答案的自旋:由于KISS原则，你已经在做正确的事情了。

根据你最终会得到多少个模板(你提到的“更多”)，你可能想把它们与你的主页分开。这有几个原因。

其中一个原因仍然是KISS原则。过多的模板可能会使您的源代码难以导航。您的编辑器或IDE可能已经对此进行了介绍。如果没有，这可能是将模板放在单独文件中的一个很好的理由。

另一个原因是性能。如果您只提供HTML文件本身，而不使用模板，则您的页面将更快到达客户端并开始呈现。您还可以允许客户端缓存一些模板，并仅在它们更改时加载新的模板。这将使以后访问您的站点时初始化速度更快。

如果性能特别重要，您可以考虑混合使用这两种方法。您将在HTML主页面中包含组成页面基本结构的基本模板。然后，可以在页面加载之后和/或在需要它们之前获取可选模板。要包含必要的模板，您可以使用服务器端模板。

关于你最初的问题，关于在哪里存储它们，我说你应该把它们放在对你有意义的地方。然后，有关如何构建和获取模板的信息，请参阅Dave Ward's article on using external templates with jQuery templates。下面是基本的代码片段：

// Asynchronously our PersonTemplate's content.
$.get('PersonTemplate.htm', function(template) {

  // Use that stringified template with $.tmpl() and 
  //  inject the rendered result into the body.
  $.tmpl(template, person).appendTo('body');
});

然后，查看An Introduction to jQuery Templates, by Stephen Walther并跳转到标题为“远程模板”的部分。他在那里有一个例子，它只获取和编译模板一次，但可以渲染多次。以下是基本的代码片段：

// Get the remote template
$.get("ProductTemplate.htm", null, function (productTemplate) {

    // Compile and cache the template
    $.template("productTemplate", productTemplate);

    // Render the products
    renderProducts(0);
});

function renderProducts() {
    // Get page of products
    var pageOfProducts = products.slice(pageIndex * 5, pageIndex * 5 + 5);

    // Used cached productTemplate to render products
    $.tmpl("productTemplate", pageOfProducts).appendTo("#productContainer");
}

Answer 2

检查这个堆栈溢出问题，这里有大量的例子编辑:可能过时的 Recommended JavaScript HTML template library for JQuery?

此外，这里还有一篇关于使用外部模板文件的最新文章：http://encosia.com/2010/10/05/using-external-templates-with-jquery-templates/

Answer 3

如果你不使用.NET，我不知道这是否会有帮助，但我有同样的问题，我写了一些代码来做到这一点：

http://htmldeploy.codeplex.com/SourceControl/changeset/view/228d0905a46b#src%2fHtmlDeploy%2fJqueryTemplate.cs

它基本上只是转到一个路径，复制并粘贴所有的html文件，并在其上附加脚本type="text/x-jquery-tmpl"部分。

如果您需要更自动化，下面是一些将模板附加到html/aspx文件的主体的其他代码：

http://htmldeploy.codeplex.com/SourceControl/changeset/view/228d0905a46b#src%2fHtmlDeploy%2fMasterPage.cs

我不喜欢外部模板方法，因为需要大量的HTTP请求。理想情况下，希望它在页面上下载一次，我可以忘记模板。如果您使用的是Asp.net，则可以将以下代码放入MasterPage :)

希望能有所帮助

Chi