я в основном согласен со спином этого ответа в: 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");
}
Я думал, что цель шаблонов состоит в том, чтобы вы могли разделить общий контент на отдельные файлы? Какой шаблонный движок вы используете, как выглядит ваш код и что вы пробовали? – jmort253
@ jmort253 обновленное сообщение, чтобы ответить на ваш вопрос. – LDK