jQuery模板-我应该将它们放在哪里? [英] jQuery templates - where should I put them?

问题描述

目前，我有一个HTML页面，其中包含4个模板，并且还会有更多模板.是否可以将模板放在不同的文件中并导入"它们?我可以在.js文件中定义它们吗?

At the moment I have a single html page that has 4 templates in it and will have many more. Is it possible to put the templates in different files and "import" them in? Can I define them in a .js file?

我正在使用jQquery模板插件: http://api.jquery.com/category /plugins/templates/

I'm using jQquery template plugin: http://api.jquery.com/category/plugins/templates/

我的代码类似于示例！

推荐答案

我基本上同意以下答案: KISS 原则，您已经在做正确的事情.

I mostly agree with this answer's spin: Where to keep html templates? You're already doing the right thing, because of the KISS principle.

取决于最终要使用的模板数量(您提到了更多")，您可能希望将其与主页分开.有两个原因.

Depending on how many templates you'll end up with (you mentioned "many more"), you may want to separate them from your main page. There are a couple reasons for this.

一个原因将再次是KISS原则.太多的模板可能会使您的源代码难以导航.您的编辑器或IDE可能已经涵盖了这一点.如果没有，这可能是将模板放入单独文件的好理由.

One reason would again be the KISS principle. Too many templates could make your source code difficult to navigate. Your editor or IDE might have you covered on this already. If not, this may be a good reason to put your templates into separate files.

另一个原因是性能.如果您自己提供HTML文件(不带模板)，则页面将到达客户端并开始更快地呈现.您还可以允许客户端缓存某些模板，并仅在它们更改时才加载新模板.这将使您以后对您网站的访问初始化得更快.

The other reason would be for performance. If you serve the HTML file by itself, without the templates, your page will arrive at the client and begin rendering much sooner. You can also allow the client to cache some templates and only load new ones when they change. This will make future visits to your site initialize much faster.

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

If performance is especially important, you might consider a mixture of the two approaches. You would include the essential templates, the ones that assemble the basic structure of your page, in the main HTML page. Then, the optional templates can be fetched after the page loads and/or right before they're needed. To include the essential templates, you could use server-side templating.

关于您最初的问题，关于它们的存储位置，我说您应该将它们放置在您认为合适的位置.然后，请参见戴夫·沃德(Dave Ward)关于将外部模板与jQuery模板一起使用的文章有关如何构建和获取模板的信息.这是必不可少的代码段:

Regarding your original question, as to where to store them, I say that you should put them wherever makes sense to you. Then, see Dave Ward's article on using external templates with jQuery templates for info on how build and fetch your templates. Here's the essential snippet of code:

// 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)的jQuery模板，然后跳到标题为远程模板"的部分.他在那里有一个示例，该示例仅提取和编译一次模板，但是可以多次渲染.以下是基本片段:

Then, see An Introduction to jQuery Templates, by Stephen Walther and jump to the section titled "Remote Templates". He has an example there which fetches and compiles the template only once, but makes it possible to render multiple times. Here are the essential snippets:

// 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");
}

这篇关于jQuery模板-我应该将它们放在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！