Статьи

Как написать пользовательский элемент управления WinJS — взять два

Декабрь 5, 2018

В
предыдущем посте я показал, как создать пользовательский элемент управления WinJS, который добавляет поддержку автозаполнения текстового поля с использованием элемента списка данных HTML5
. Меня спросили, как я могу улучшить этот элемент управления для поддержки сценариев удаленных данных, поэтому я обновил исходный код, чтобы показать, как этого добиться. Обратите внимание, что если вы не знакомы с
объектом WinJS.Promise, который используется в решении, вы можете прочитать об этом в
MSDN, прежде чем продолжить.

Обновленный элемент управления

Вот исходный код для обновленного элемента управления:

(function (WinJS) {
    WinJS.Namespace.define("MyApp.UI", {
        Autocomplete: WinJS.Class.define(function (element, options) {
            if (!element || element.tagName.toLowerCase() !== "input") throw "input type must be provided";
            var that = this;
            options = options || {};
            that._setElement(element);
            this._element.winControl = this;
            WinJS.UI.setOptions(this, options);
 
            if (options.remoteDataSource) {
                options.remoteDataSource.then(function (optionList) {
                    that._setOptionList(optionList);

Основным изменением здесь является то, что я ожидаю получить параметр RemoteDataSource WinJS.Promise как часть объекта параметров. Если он существует, я использую то функцию WinJS.Promise объекта ждать асинхронного извлечения данных дистанционного до конца. Когда это произойдет, я могу использовать функции _setOptionList и _createDataList .

Обновленный источник данных

Теперь, когда есть поддержка как синхронного, так и асинхронного извлечения данных, вы можете имитировать удаленное извлечение данных, создав завершенный объект WinJS.Promise . Вот новый код в файле data.js :

(function () {
    "use strict";

    var citiesList = ["Seattle", "Las Vegas", "New York", "Salt lake City"];

    WinJS.Namespace.define("Data", {
        citiesAsync: new WinJS.Promise(function (complete) {
            complete(citiesList);
        }),
        cities: citiesList
    });
})();

Как вы видите, я создаю список городов, а затем возвращаю его как выполненный WinJS.Promise . Свойство townsAsync может быть установлено на результат использования объекта WinJS.xhr или любой другой асинхронной операции.

Обновленный файл home.html

Чтобы завершить пример, вы должны изменить home.html, чтобы включить другое текстовое поле. Новое текстовое поле будет иметь свойство опции remoteDataSource, установленное в Data.citiesAsync :

<input type="text" name="txtCitiesAsync" id="txtCitiesAsync" data-win-control="MyApp.UI.Autocomplete" data-win-options="{ remoteDataSource: Data.citiesAsync }"/>

Вот и все.

Резюме

В этой статье я показал, как изменить пользовательский элемент управления для поддержки асинхронного извлечения данных в процессе его создания. Я использую объект WinJS.Promise, чтобы сделать это.

 

 

 

34
Share: