目前我有一个 html 页面，其中包含 4 个模板，并且还会有更多。是否可以将模板放在不同的文件中并“导入”它们？我可以在 .js 文件中定义它们吗？
我正在使用 jQquery 模板插件：http ://api.jquery.com/category/plugins/templates/
我的代码看起来像示例！
问问题
5089 次
3 回答
5
我大多同意这个答案的旋转：在哪里保留 html 模板？由于KISS原则 ，您已经在做正确的事情。
根据您最终会得到多少模板（您提到“更多”），您可能希望将它们与您的主页分开。这有几个原因。
原因之一还是 KISS 原则。太多的模板会使您的源代码难以浏览。您的编辑器或 IDE 可能已经涵盖了这一点。如果没有，这可能是将模板放入单独文件的好理由。
另一个原因是性能。如果您自己提供 HTML 文件，而不使用模板，您的页面将到达客户端并更快地开始呈现。您还可以允许客户端缓存一些模板，并仅在它们更改时加载新模板。这将使将来对您网站的访问初始化得更快。
如果性能特别重要，您可以考虑混合使用这两种方法。您将在主 HTML 页面中包含基本模板，即组装页面基本结构的模板。然后，可以在页面加载后和/或在需要它们之前获取可选模板。要包含基本模板，您可以使用服务器端模板。
关于您最初的问题，关于将它们存储在哪里，我说您应该将它们放在对您有意义的地方。然后，请参阅Dave Ward 关于将外部模板与 jQuery 模板一起使用的文章，了解有关如何构建和获取模板的信息。这是基本的代码片段：
// 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');
});
然后，请参阅Stephen Walther 的 An Introduction to jQuery Templates并跳转到标题为“远程模板”的部分。他有一个示例，该示例仅获取和编译模板一次，但可以多次渲染。以下是基本片段：
// 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");
}
于 2011-09-02T17:19:26.543 回答
2
查看这个 Stack Overflow 问题，这里有很多示例编辑：可能已过时 ，推荐用于 JQuery 的 JavaScript HTML 模板库？
此外，这里有一篇关于使用外部模板文件的更新文章：http: //encosia.com/2010/10/05/using-external-templates-with-jquery-templates/
于 2011-01-18T06:50:29.927 回答
0
如果您不使用.NET，我不知道这是否会有所帮助。但我有同样的问题，我写了一些代码来做到这一点：
这个东西基本上只是去一个路径并复制并粘贴所有html文件并在其上附加script type="text/x-jquery-tmpl"部分。
如果您需要它更加自动化，这里有一些其他代码将模板附加到html/aspx 文件的正文中：
由于需要大量的 HTTP 请求，我不喜欢外部模板方法。理想情况下，希望它在页面上下载一次，我可以忘记模板。如果您使用的是 Asp.net，则可以将其放在 MasterPage 中：)
希望它有所帮助
志
于 2011-01-20T22:21:58.157 回答