Хранение шаблонов jquery / js в отдельных файлах - PullRequest
Новая
       15

Хранение шаблонов jquery / js в отдельных файлах

4 голосов
/ 07 сентября 2011

Я пытаюсь выяснить, как хранить шаблоны jQuery в разных файлах из базового html (без использования строкового или ajax-запроса).

Например, на моей html-странице я хотел бы сделать это: 

<script type ="text/x-jquery-tmpl" id="personTmpl" src="js/personApp.tmpl.html"></script>
<div id="container"></div>
<script type="text/javascript">
    var p = { name: 'joe' };
    $( "#personTmpl" ).tmpl( p ).appendTo( "#container" );
</script>

Где #personTmpl будет определен в файле personApp.tmpl.html (или в другом месте)

Конечная цель - просто отделить мой шаблон от кода js (и html).

Мне не нравится строковый метод, потому что он затрудняет редактирование длинных шаблонов. И я не хочу запускать ajax-запрос при загрузке (обратите внимание, что файл шаблона в конечном итоге будет агрегирован для производства).

Мысли

Ответы [ 3 ]

0 голосов
/ 07 ноября 2011

Я решил эту проблему, используя requirejs вместе с их текстовым плагином.Во время разработки шаблоны загружаются с использованием XHR-запроса.При развертывании я оптимизировал с помощью файла requirejs r.js, а затем шаблоны включаются в основной файл js, сохраняя количество загружаемых файлов.

0 голосов
/ 12 декабря 2013

В настоящее время разрабатывается API ( HTML Imports ) для этого - обзор на HTML5Rocks . Однако, поскольку он находится в стадии разработки, он, вероятно, не будет подходящим, за исключением приложений, которые могут работать с ограниченной поддержкой браузера.

Другой вариант - создать что-то свое через Ajax и / или систему сборки.

0 голосов
/ 07 сентября 2011

У меня была похожая ситуация, и я решил написать объект кэширования шаблона, который отвечал за загрузку шаблона через ajax при первом запросе и последующее сохранение в памяти.Это работало довольно хорошо для моего проекта.Я могу опубликовать код, который использовал, если вам интересно.

...