2011-01-18 3 views
5

На данный момент у меня есть одна страница html, в которой есть 4 шаблона, и будет еще много. Можно ли поместить шаблоны в разные файлы и «импортировать» их? Могу ли я определить их в файле .js?jQuery шаблоны - где я должен их положить?

Я использую jQquery шаблон плагин: http://api.jquery.com/category/plugins/templates/

Мой код выглядит как примеры!

+0

Я думал, что цель шаблонов состоит в том, чтобы вы могли разделить общий контент на отдельные файлы? Какой шаблонный движок вы используете, как выглядит ваш код и что вы пробовали? – jmort253

+0

@ jmort253 обновленное сообщение, чтобы ответить на ваш вопрос. – LDK

ответ

5

я в основном согласен со спином этого ответа в: Where to keep html templates? Вы уже делаете право вещь, из-за принципа 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"); 
} 
2

Заканчивать этот Stack Overflow Вопрос, есть много примеров здесь EDIT: возможно, устарела Recommended JavaScript HTML template library for JQuery?

Кроме того, здесь есть более свежая статья об использовании внешних файлов шаблона: http://encosia.com/2010/10/05/using-external-templates-with-jquery-templates/

+0

Я бы не рекомендовал первую ссылку, потому что вопрос и ответы старые. Достаточно хорошо, чтобы не включать последний плагин шаблонов, предоставляемый самим jQuery, который просто отлично работает. –

0

I не знаю, поможет ли это, если вы не используете .NET. Но у меня такая же проблема, и я написал код, чтобы сделать только что:

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

Эта вещь в основном просто идет в путь и скопируйте все HTML-файлы и придает тип сценарий = "текст/x-jquery-tmpl " часть на нем.

Если вам это нужно, чтобы быть еще более автоматизированным, вот какой-то другой код, который добавляет шаблоны к тела из файла HTML/ASPX:

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

Мне не нравится внешний метод шаблонов из-за количества требуемого HTTP-запроса. В идеале, хотите, чтобы он был загружен один раз на странице, и я могу забыть о шаблонах. Если вы используете Asp.net, вы можете поместить это в MasterPage :)

Надеется, что это помогло

Chi

Смежные вопросы