Как создать функцию создания шаблонов (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]
Узнайте, как создать функцию создания шаблона, генерирующую элементы для ListView.
Что необходимо знать
Технологии
Необходимые условия
- Предполагается, что вы умеете создавать простые приложения Магазина Windows на JavaScript с использованием элементов управления WinJS. Дополнительные инструкции по началу работы с элементами управления WinJS см. в статье Краткое руководство: добавление элементов управления WinJS и стилей.
Инструкции
Этап 1: Функции создания шаблонов
Вместо того чтобы определить шаблон элемента в разметке, вы можете создать функцию, которая преобразует каждый элемент списка. Функция преобразования принимает следующие параметры:
object renderItem(itemPromise, recycledElement)
itemPromise: интерфейс IItemPromise для данных преобразуемого элемента. В случае синхронного источника данных интерфейс IItemPromise обычно завершает работу мгновенно, а в случае асинхронного — с некоторой задержкой.
recycledElement : модель DOM предыдущего элемента, который можно использовать повторно для отображения нового содержимого. Это необязательный параметр.
Если вы повторно используете элементы:
удалите данные старого элемента, прежде чем повторно использовать элемент в качестве заполнителя; когда вы повторно используете элементы, старый элемент будет содержать старые данные и состояние последнего использования; очистите или скройте состояние перед повторным использованием элемента.
Например, если шаблон содержит фотографию, а вы хотите повторно использовать элемент img, но у вас еще нет нового URL-адреса, скройте img, установив значение непрозрачности равным 0, потому что элемент может содержать фотографию из старых данных. Если у вас есть URL-адрес новой фотографии, вы можете обновить элемент img и снова установить значение 1 для его непрозрачности.
Если HTML-код элемента имеет состояние с условиями, зависящими от данных элемента, обязательно сбросьте его при повторном использовании.
Повторно используя элементы, сводите к минимуму структурные изменения DOM. Если recycledElement непригоден для повторного использования, игнорируйте его и создайте новый элемент с нуля, а элемент recycledElement будет утилизирован сборщиком мусора.
Предупреждение Элемент управления ListView может изменить структуру recycledElement, поэтому всегда проверяйте, существуют ли дочерние элементы, прежде чем обращаться к ним.
Функция преобразования для просмотра должна возвратить одно из двух:
Корневой узел дерева DOM данного элемента.
Объект со следующими свойствами:
element: корневой узел дерева DOM элемента или объект Promise, который при завершении работы возвращает корневой узел для данного элемента.renderComplete: объект Promise, который завершает работу после полного преобразования элемента.
Этап 2: Создание простой функции преобразования
Этот пример получает ListView с именем templateFunctionListView и устанавливает его свойство itemTemplate равным функции создания шаблона для элемента, отображающего title, text и picture каждого элемента данных.
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll().then(function () {
var lView = document.getElementById("templateFunctionListView").winControl;
lView.itemTemplate = itemTemplateFunction;
}));
}
};
function itemTemplateFunction(itemPromise) {
return itemPromise.then(function (item) {
var div = document.createElement("div");
var img = document.createElement("img");
img.src = item.data.picture;
img.alt = item.data.title;
div.appendChild(img);
var childDiv = document.createElement("div");
var title = document.createElement("h4");
title.innerText = item.data.title;
childDiv.appendChild(title);
var desc = document.createElement("h6");
desc.innerText = item.data.text;
childDiv.appendChild(desc);
div.appendChild(childDiv);
return div;
});
};
Примечания
Прочие примеры см. в образце шаблона элемента ListView.