JavaScript Программистам

Позволяет использовать html-шаблоны для генерации конечных html-страниц. Основная цель — отделение представления данных от исполняемого кода. Использование шаблонизаторов часто улучшает читаемость кода и упрощает внесение изменений во внешний вид.

Первое что нужно сделать — подключить dfd-jtemplate:

<script src="js/dfd-jtemplate-v1.3.1.js"></script>

dfd-jtemplate генерирует HTML из JSON данных. Чтобы браузер мог распознать шаблон dfd-jtemplate, мы должны присвоить ему тип text/x-dfd-jtemplate, и указать ID, чтобы ссылаться на него позже.

<script id="template" type="text/x-dfd-jtemplate">
	<h3>{{name}}</h3>
</script>

После описания всех шаблонов необходимо инициализировать их

<script>
	$dfdJt.init();
</script>

Создаем источник данных, имя будет получено из объекта data и подставлено в шаблоне вместо {{name}}

var data = {
   name : "Мария Биешу"
}

Для обхода массива используется конструкция {{#each array}}...{{/each}}

var data = { 
		honoredText: "Народная артистка СССР",
		vocalists: [
		{
		   name : "Мария Биешу",
		   voice : "сопрано",
		   isHonored : true
		},
		{
		   name : "Пьер Бернак",
		   voice : "баритон",
		   isHonored : false
		}
	]
}

<script id="template" type="text/x-dfd-jtemplate">
	<ul>
		{{#each vocalists}}
		<li>
			<b>{{name}}</b> - <i>{{voice}}</i>
		</li>
		{{/each}}
	</ul>
</script>

Для проверки условий используется конструкция {{#if isHonored}}...{{else}}...{{/if}}, также в контексте можно ссылаться на родительские переменные используя сегмент ../ перед переменной.
Комментарии начинаются с {{!-- и заканчиваются --}}.

<script id="template" type="text/x-dfd-jtemplate">
	{{!-- This text will not be in the output --}}
	<ul>
		{{#each vocalists}}
		<li>
			<b>{{name}}</b> - <i>{{voice}}</i>
			{{#if isHonored}}
				- {{../honoredText}}
			{{/if}}

		</li>
		{{/each}}
	</ul>
</script>

Для загрузки шаблонов будет полезным загрузчик скриптов. Загрузчик позволяет подгружать скрипты, таблицы стилей и шаблоны dfd-jtemplate, при этом скрипты загружаются в последнюю очередь и сохраняется последовательность загрузки.

<script src="js/dfd-jloader-v1.0.3.js"></script>

<script>
	$dfdJl.load([
		"../dfd-jtemplate/dfd-jtemplate-v1.3.1.js"
		,"1.js"
		,"1.htm"
		,"dfd-style.css"
		,"ie-onload.js"
		]);
</script>

function bodyLoad(){
	$dfdJt.init();
	document.getElementById('div1').innerHTML=
		$dfdJt.htm('template1',data1);
}

if (document.readyState=="complete") 
	bodyLoad(); 
else 
	window.onload=function(){bodyLoad();}