Использование внешних шаблонов в jQuery Templates
Т.к. jQuery Templates входят в библиотеку jQuery, но не поддерживают удаленной загрузки, я решил написать небольшое руководство, как сделать это самому. Как я уже упоминал ранее, ввиду наличия удобного взаимодействия между API jQuery Templates и методов jQuery AJAX, мы можем реализовать удаленную загрузку проще, чем вы думаете.
В этой заметке я покажу, как использовать в качестве шаблона простую строку, как асинхронно загрузить внешний шаблон в виде строки и как отобразить его с помощью jQuery Templates после загрузки.
Создаём внешний шаблон
Создание внешнего шаблона, подходящего для удалённой загрузки, почти не требует особых усилий. Просто создадим новый файл и заполните его таким типом шаблона jQuery, который можно нормально вставить в элемент <script>.
Для примера есть такой объект person:
var person = { name: 'Dave' };
Определим шаблон для этого объекта в файле PersonTemplate.htm:
<p>Привет, ${name}.</p>
Убедитесь, что не обернули шаблон в тег <script>. Также убедитесь, что нет других html тегов в шаблоне, которые могут появиться при создании html файла в вашем любимом редакторе, например <html> или <body>.
Дополнительный бонус от отсутствия элемента <script> - подсветка синтаксиса в шаблоне. Многие редакторы не предоставляют подсветки html синтаксиса внутри элемента <script>.
Используем строки в качестве шаблона
Хотя большинство примеров шаблонов находятся внутри тега <script>, также возможно определить шаблон в качестве обычной строки. Используя синтаксис $.tmpl(template, data), простая строка может быть передана первым параметром в качестве шаблона.
Например,есть два отличных способа воспроизвести (to render - прим. перев.) шаблон, используя объект @person@ в главе выше:
// Определяем шаблон в одной строке.
$.tmpl('<p>Привет, ${name}.</p>', person);
// Присваиваем такой же шаблон переменной JavaScript,
// и используем эту строку в качестве параметра в $.tmpl().
var salutationTmpl = '<p>Привет, ${name}.</p>';
$.tmpl(salutationTmpl, person);
Используя возможность задавать шаблоны в качестве строк, нам всего лишь нужно загрузить содержимое внешнего шаблона в переменную.
Загружаем внешний шаблон
С мыслями об этом, возможно, самый простой способ загрузить внешний шаблон - использовать метод jQuery $.get() method. Когда вы нацелите $.get() на статичный html файл, результатом, переданным в колбэк, будет строка с содержимым шаблона. Именно то, что нужно.
Например, если внешний шаблон определён в файле PersonTemplate.htm, то в примере ниже показано, как использовать $.get() для загрузки и воспроизведения внешнего шаблона с помощью jQuery Templates:
// Асинхронно получаем содержимое PersonTemplate.
$.get('PersonTemplate.htm', function(template) {
// используйте полученную строку в$.tmpl() и
// вставьте в тег body.
$.tmpl(template, person).appendTo('body');
});
Вот и всё.