Как создать функцию создания шаблонов (HTML)

Applies to Windows and Windows Phone

Узнайте, как создать функцию создания шаблона, генерирующую элементы для ListView.

Что необходимо знать

Технологии

Необходимые условия

Инструкции

Этап 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.

Связанные разделы

Пример шаблона элемента ListView

 

 

Показ:
© 2014 Microsoft