Разворачивание HTML_шаблонов с использованием XML

Одна из ключевых особенностей островков XML_данных заключается в том, что они могут использоваться механизмом автоматического разворачивания шабло_ нов, при котором данные из этих островков автоматически вставляются в HTML_ элементы. Такого рода HTML_шаблоны в IE определяются добавлением в эле_ менты атрибутов datasrc и datafld (где префикс «fld» означает «field» – поле).

В этом разделе описываются приемы работы с XML_данными, уже упоминав_ шиеся в начале главы, а также приемы создания средствами XPath и DOM улуч_ шенного механизма разворачивания шаблонов, который будет работать в броузе_ рах IE и Firefox. Шаблон – это любой HTML_элемент с атрибутом datasource. Зна_ чением этого атрибута должен быть идентификатор островка XML_данных или URL_адрес внешнего XML_документа. Кроме того, элемент шаблона должен иметь атрибут foreach, значением которого является XPath_выражение, возвра_ щающее список XML_узлов, откуда должны извлекаться данные. Для каждого XML_узла, полученного в результате выполнения выражения foreach, в HTML_ документ вставляется развернутая копия шаблона. Разворачивание шаблона производится в результате поиска внутри него всех элементов, имеющих атрибут data. Данный атрибут – это еще одно XPath_выражение, которое выполняется в контексте узла, полученного от выражения foreach. Выражение data выполня_ ется вызовом метода XML.getNode(), а текст, содержащийся в полученном узле, ис_ пользуется как содержимое HTML_элемента, в котором этот атрибут определен.

Это описание станет понятнее после изучения конкретного примера. В приме_ ре 21.12 приводится простой HTML_документ, который включает островок XML_данных и использующий его шаблон. Разворачивание шаблона произво_ дится обработчиком события onload.

Пример 21.12. Островок XML'данных и HTML'шаблон

<html>

<!__ загрузить XML_утилиты для работы с островками данных и шаблонами __> <head><script src="xml.js"></script></head>

<!__ Развернуть все шаблоны документа после загрузки __> <body onload="XML.expandTemplates()">

<!__ Это островок XML_данных __>

<contact name="Able Baker"><email>able@example.com</email></contact> <contact name="Careful Dodger"><email>dodger@example.com</email></contact> <contact name="Eager Framer"><email>framer@example.com</email></contact>

</contacts>

</xml>

<!__ Это обычные HTML_элементы __> <table> <tr><th>Имя</th><th>Адрес</th></tr>

<!__ Это шаблон. Данные берутся из островка с id="data". __>

<!__ Шаблон разворачивается и копируется для каждого тега <contact> __> <tr datasource="#data" foreach="//contact">

538 Глава 21. JavaScript и XML

<!__ В этот элемент вставляется значение атрибута "name" тега <contact> __> <td data="@name"></td>

<!__ Здесь вставляется содержимое <email> – потомка узла <contact> __> <td data="email"></td>

</tr> <!__ конец шаблона __> </table>

</body>

</html>

Наиболее важной частью примера 21.12 является обработчик события onload, который вызывает функцию XML.expandTemplates(). Реализация этой функции де_ монстрируется в примере 21.13. Программный код, который практически не за_ висит от платформы, основан на модели DOMLevel 1 и вспомогательных функ_ циях XML.getNode() и XML.getNodes(), реализованных в примере 21.10 и предназна_ ченных для работы с XPath_выражениями.

Пример 21.13. Разворачивание HTML'шаблонов

* Разворачивает любые шаблоны, вложенные в элемент e. Если в каком_либо

* из шаблонов используются XPath_выражения с пространствами имен, во втором

* аргументе необходимо передать отображение префиксов пространств имен

* на соответствующие им URL_адреса, как в случае с XML.XPathExpression()

* Если элемент e не указан, используется document.body. Обычно эта функция

* вызывается без аргументов из обработчика события onload. В этом случае

* она автоматически разворачивает все шаблоны.

XML.expandTemplates = function(e, namespaces) {

// Немножко подправить аргументы. if (!e) e = document.body;

else if (typeof e == "string") e = document.getElementById(e);

if (!namespaces) namespaces = null; // Значение undefined не работает

// HTML_элемент является шаблоном, если имеет атрибут "datasource".

// Рекурсивный поиск и разворачивание всех шаблонов.

// Обратите внимание: шаблоны внутри шаблонов недопустимы.

if (e.getAttribute("datasource")) {

// Если это шаблон _ развернуть его. XML.expandTemplate(e, namespaces);

}

else {

// Иначе рекурсивно обойти все дочерние узлы. Прежде чем развернуть

// шаблон, создается статическая копия потомка, чтобы развернутый

// шаблон не мешал итерации.

var kids = []; // Создать копию дочернего элемента for(var i = 0; i < e.childNodes.length; i++) {

var c = e.childNodes[i];

if (c.nodeType == 1) kids.push(e.childNodes[i]);

}

// Обойти все дочерние элементы for(var i = 0; i < kids.length; i++)

XML.expandTemplates(kids[i], namespaces);

}

21.6. Разворачивание HTMLшаблонов с использованием XMLданных

};

/**

* Разворачивает один указанный шаблон. Если XPath_выражение в шаблоне использует

* имена пространств, вторым аргументом следует передать отображение

* префиксов пространств имен на соответствующие им URL_адреса.

XML.expandTemplate = function(template, namespaces) {

if (typeof template=="string") template=document.getElementById(template); if (!namespaces) namespaces = null; // Undefined does not work

// Для начала определить, откуда брать данные для шаблона var datasource = template.getAttribute("datasource");

// Если значение атрибута datasource начинается с '#', следовательно,

// это имя островка XML_данных. Иначе это URL_адрес внешнего XML_файла. var datadoc;

if (datasource.charAt(0) == '#')	//	Получить островок данных
datadoc = XML.getDataIsland(datasource.substring(1));
else	//	Или загрузить внешний документ
datadoc = XML.load(datasource);

// Теперь нужно определить, какие узлы в datasource будут служить

// источниками данных. Если в шаблоне имеется атрибут foreach,

// использовать его значение как XPath_выражение для получения списка узлов.

// В противном случае задействовать все дочерние элементы элемента document. var datanodes;

var foreach = template.getAttribute("foreach");

if (foreach) datanodes = XML.getNodes(datadoc, foreach, namespaces); else {

// Если атрибут "foreach" не задан, использовать дочерние

// элементы элемента documentElement

datanodes = [];

for(var c=datadoc.documentElement.firstChild;c!=null;c=c.nextSibling) if (c.nodeType == 1) datanodes.push(c);

}

// Удалить элемент шаблона из его родительского элемента,

// но запомнить родителя, а также nextSibling шаблона. var container = template.parentNode;

var insertionPoint = template.nextSibling; template = container.removeChild(template);

// Для каждого элемента массива datanodes обратно в контейнер вставляется

// копия шаблона, но перед этим выполняется разворачивание всех дочерних

// элементов копии, в которых присутствует атрибут "data".

for(var	i = 0;	i	< datanodes.length; i++) {
var	copy =	template.cloneNode(true);	// Копировать	шаблон
expand(copy,	datanodes[i], namespaces);	//	Развернуть	копию
container.insertBefore(copy, insertionPoint); //	Вставить копию
}

// Эта вложенная функция отыскивает все дочерние элементы для элемента e,

// в котором определен атрибут data. Этот атрибут интерпретируется как

// XPath_выражение и вычисляется в контексте datanode. Извлекает текст

// из результата выполнения XPath_выражения и вставляет его как содержимое

540 Глава 21. JavaScript и XML

// разворачиваемого HTML_узла. Все остальное содержимое удаляется. function expand(e, datanode, namespaces) {

for(var c = e.firstChild; c != null; c = c.nextSibling) { if (c.nodeType != 1) continue; // Только элементы

var dataexpr = c.getAttribute("data"); if (dataexpr) {

// Выполнить XPath_выражение в контексте datanode. var n = XML.getNode(datanode, dataexpr, namespaces);

// Удалить все содержимое элемента

c.innerHTML = "";

// И вставить текст, полученный в результате

// выполнения XPath_выражения c.appendChild(document.createTextNode(getText(n)));

}

// Если элемент не был развернут, обойти его рекурсивно. else expand(c, datanode, namespaces);

}

// Эта вложенная функция извлекает текст DOM_узла,

// выполняя рекурсию, если это необходимо. function getText(n) {

switch(n.nodeType) { case 1: /* элемент */

var s = "";

for(var c = n.firstChild; c != null; c = c.nextSibling) s += getText(c);

return s;

case 2: /* атрибут */ case 3: /* текст */ case 4: /* cdata */

return n.nodeValue; default:

return "";

}

};

Разворачивание HTML_шаблонов с использованием XML_данных