Использование шаблонов для привязки данных (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Шаблоны библиотеки Windows для JavaScript — это удобный способ форматирования и отображения нескольких экземпляров данных. Вы можете использовать эти шаблоны в сочетании с объектами ListView и FlipView, чтобы указать необходимый способ их отображения. Кроме того, вы можете использовать шаблон для привязки нескольких экземпляров объекта данных, не используя встроенное представление. Дополнительные сведения об использовании шаблона с элементом ListView см. в разделе Краткое руководство: добавление элемента ListView. Дополнительные сведения об использовании шаблона с элементом FlipView см. в разделе Добавление элементов управления FlipView. Следующая процедура демонстрирует использование шаблона с массивом.

Вы можете определить шаблон декларативно как элемент управления WinJS и указать его внутреннюю структуру и стиль. Шаблоны не обрабатываются как часть DOM и не возвращаются как часть результатов поиска DOM, хотя они и объявляются как элементы DIV. Вы можете указать элемент DIV, в котором должен появиться шаблон, или разрешить методу render создать собственный элемент DIV. В этой теме показано, как использовать шаблон для привязки переменного количества объектов данных с возможностью привязки к элементу DIV. Пользователь выбирает количество объектов для отображения путем выбора элемента в раскрывающемся списке.

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

Изучение темы краткого руководства о привязке данных и стилей к элементам HTML может помочь в выполнении шагов данного раздела.

Инструкции

Этап 1: Настройка проекта для использования шаблона

Чтобы настроить проект, в котором будет использоваться шаблон, выполните следующие шаги.

Hh700356.wedge(ru-ru,WIN.10).gif

Создайте пустое приложение Магазина Windows на JavaScript и назовите его TemplateExample.
В элемент BODY файла default.html добавьте элемент DIV для шаблона и присвойте ему идентификатор templateDiv, а затем добавьте атрибут data-win-control со значением "WinJS.Binding.Template", как показано в данном разделе.
```
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template"></div> 
</body>
```
Мы также добавим внутреннюю структуру шаблона после определения объекта данных.

Этап 2: Определение объекта данных и его привязка к полям шаблона

В файле default.js в пределах немедленно вызываемой функции объявите объект, содержащий несколько полей. В этом случае мы используем метод WinJS.Binding.define, который позволяет привязывать любые свойства.
```
(function () {
    "use strict";

    // Other app code ...

    // Define a Person object with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

})();
```

Чтобы отобразить поля этого объекта в шаблоне, понадобится список, элементы которого соответствуют полям объекта данных, как показано здесь. Добавьте следующий код в пределах тегов BODY в файле default.html.

<div id="templateDiv" data-win-control="WinJS.Binding.Template">
    <div class="templateItem" data-win-bind="style.background: color">
        <ol>
            <li><span>Name :</span><span data-win-bind="textContent: name"></span></li>
            <li><span>Birthday:</span><span data-win-bind="textContent: birthday"></span></li>
            <li><span>Pet's name: </span><span data-win-bind="textContent: petname"></span></li>
            <li><span>Dessert: </span><span data-win-bind="textContent: dessert"></span></li>
        </ol>
    </div>
</div>

Под кодом шаблона в файле default.html добавьте элемент DIV, в котором должен отображаться шаблон.
```
<div id="templateControlRenderTarget"></div>
```

Этап 3: Управление количеством отображенных объектов

Для этого примера мы создадим три объекта Person и добавим раскрывающийся список, чтобы пользователь мог выбрать количество объектов Person, которые следует отобразить.

Добавьте следующий код в пределах тегов BODY в файлах default.html.

<fieldset id="templateControlObject">
    <legend>Pick a name:</legend>
    <select id="templateControlObjectSelector">
        <option value="0">Show one</option>
        <option value="1">Show two</option>
        <option value="2">Show three</option>
    </select>
</fieldset>

В файле default.js в пределах немедленно вызываемой анонимной функции создайте массив из трех объектов Person.


(function () {
    "use strict";

    // Other app code ...

    // Define a Person 'class' with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

    // Declare an array of People objects.
    var people = [
        new Person({name:"Bob", color:"red", birthday:"2/2/2002", petname:"Spot", dessert:"chocolate cake"}),
        new Person({name:"Sally", color:"green", birthday:"3/3/2003", petname:"Xena", dessert:"cherry pie"}),
        new Person({name:"Fred", color:"blue", birthday:"2/2/2002", petname:"Pablo", dessert:"ice cream"}),
    ];

})();

3. Теперь добавьте прослушиватель для события изменения селектора раскрывающегося списка. Добавьте следующий код в обработчик события app.onactivated в файле default.js.
```
app.onactivated = function (args) {

    // Other activation code ...

    var selector = document.querySelector("#templateControlObjectSelector");
          selector.addEventListener("change", handleChange, false); 

}
```

В обработчике событий изменений выберите элемент DIV, содержащий шаблон, и элемент DIV, указывающий место отображения данных, а затем вызовите метод render для элемента управления шаблона (который вы можете получить из свойства wincontrol элемента templateDiv). При вызове метода render для шаблона соответствующие поля объекта данных привязываются к элементам списка шаблона

function handleChange(evt) {
    var templateElement = document.querySelector("#templateDiv");
    var renderElement = document.querySelector("#templateControlRenderTarget");
    renderElement.innerHTML = "";

    var selected = evt.target.selectedIndex;
    var templateControl = templateElement.winControl;

    while (selected >= 0) {
        templateElement.winControl.render(people[selected--], renderElement); 
    } 
}

Теперь вы можете выполнить сборку и отладить приложение. При выборе элемента раскрывающегося списка приложение отображает соответствующее количество объектов данных.

Этап 4: Добавление DIV методом render

Функции render не обязательно передавать созданный вами DIV; render создает новый DIV, если он не указан. Однако вы должны добавить новый DIV в модель DOM. Обратите внимание, что возвращаемым значением для render является WinJS.Promise. (Дополнительные сведения об условиях см. в разделе Краткое руководство: использование объектов отложенного результата.) В метод done отложенного результата добавьте функцию, которая добавляет новый DIV.

Измените блок while предыдущего этапа, как показано ниже.


    while (selected >= 0) {
        templateElement.winControl.render(people[selected--])
            .done(function (result) {
                 renderElement.appendChild(result);
            });        
    }

Замечания

Здесь приведен полный листинг кода из данного раздела.

default.html (Windows)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TemplateExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- TemplateExample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="style.background: color">
            <ol>
                <li>Name: <span data-win-bind="textContent: name"></span></li>
                <li>Birthday: <span data-win-bind="textContent: birthday"></span></li>
                <li>Pet's name: <span data-win-bind="textContent: petname"></span></li>
                <li>Dessert: <span data-win-bind="textContent: dessert"></span></li>
            </ol>
        </div>
    </div>
    <div id="templateControlRenderTarget"></div>
    <fieldset id="templateControlObject">
        <legend>Pick a name:</legend>
        <select id="templateControlObjectSelector">
            <option value="0">Show one</option>
            <option value="1">Show two</option>
            <option value="2">Show three</option>
        </select>
    </fieldset>
</body>
</html>

default.html (Windows Phone)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TemplateBinding</title>

    <!-- WinJS references -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- TemplateBinding references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="style.background: color">
            <ol>
                <li>Name: <span data-win-bind="textContent: name"></span></li>
                <li>Birthday: <span data-win-bind="textContent: birthday"></span></li>
                <li>Pet's name: <span data-win-bind="textContent: petname"></span></li>
                <li>Dessert: <span data-win-bind="textContent: dessert"></span></li>
            </ol>
        </div>
    </div>
    <div id="templateControlRenderTarget"></div>
    <fieldset id="templateControlObject">
        <legend>Pick a name:</legend>
        <select id="templateControlObjectSelector">
            <option value="0">Show one</option>
            <option value="1">Show two</option>
            <option value="2">Show three</option>
        </select>
    </fieldset>
</body>
</html>

default.js (Windows и Windows Phone)


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

            } else {

            }
       
            // Add event handler to selector. 
            var selector = document.querySelector("#templateControlObjectSelector");
            selector.addEventListener("change", handleChange, false);

            args.setPromise(WinJS.UI.processAll());

        }
    };

    app.start();

    // Define a Person 'class' with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

    // Declare an array of People objects.
    var people = [
        new Person({ name: "Bob", color: "red", birthday: "2/2/2002", petname: "Spot", dessert: "chocolate cake" }),
        new Person({ name: "Sally", color: "green", birthday: "3/3/2003", petname: "Xena", dessert: "cherry pie" }),
        new Person({ name: "Fred", color: "blue", birthday: "2/2/2002", petname: "Pablo", dessert: "ice cream" }),
    ];

    // Update the displayed data when the selector changes.
    function handleChange(evt) {
        var templateElement = document.querySelector("#templateDiv");
        var renderElement = document.querySelector("#templateControlRenderTarget");
        renderElement.innerHTML = "";

        var selected = evt.target.selectedIndex;
        var templateControl = templateElement.winControl;

        while (selected >= 0) {
            templateElement.winControl.render(people[selected--])
                .done(function (result) {
                    renderElement.appendChild(result);
                });        
        }
    }
})();

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

Краткое руководство: добавление элемента управления ListView

Добавление элементов управления FlipView

Поделиться через