DevExtreme - Попытка назначить массив для dxList из SQL

Question

Я пытаюсь создать dxList со всеми "пользователями" в моей базе данных SQL. Пожалуйста, обратитесь к коду ниже.

MobileApplication.User = function (params) {

    var baseAddress = 'http://localhost:8733/Design_Time_Addresses/TestService/Service/';
    var users = [];

    function getUsers() {
    $.getJSON(baseAddress + 'users?callback=?',
        function (json) {
            //This return a valid Json string, and the variable "json" is basically the array.
            users = json;
        });
    }

    getUsers();
    console.log("USERS ARRAY: ");
    console.log(users);

    var viewModel = {
        listItems: users
    };

    return viewModel;
};

Парам json вернуть правильный массив JSON (если бы я должен был вызвать console.log(json) он вернул бы массив в консоли браузера.

Я пытаюсь присвоить этот массив users массив, но console.log("USERS ARRAY: ") а также console.log(users) возвращает пустой массив

Почему он возвращает пустой массив? Не получают ли пользователи [] массив, созданный из json?

Кроме того, я новичок в DevExtreme и пытаюсь применить этот массив к dxList. Обратитесь к ниже.

<div data-options="dxView : { name: 'User', title: 'User' } ">
    <div class="home-view" data-options="dxContent : { targetPlaceholder: 'content' } ">
        <div data-bind="dxList: { items: listItems }">
            <div data-options="dxTemplate: { name: 'item' } ">
                <div data-bind="text: Name"></div>
            </div>
        </div>
    </div>
</div>

Я делаю правильные вещи здесь? Везде, где я читал о dxList, они либо используют локальные данные (текстовый файл или простой массив), и я не уверен, как это сделать?

Answer 1

$.getJSON функция работает асинхронно, поэтому console.log(users); ничего не показывает

В вашем случае я предлагаю вам использовать ko.observableArray для сохранения загруженных пользователей.

var users = ko.observableArray([]);

function getUsers() {
    $.getJSON(baseAddress + 'users?callback=?',
        function (json) {
        //This return a valid Json string, and the variable "json" is basically the array.
        users(JSON.parse(json));
    });
}

getUsers();

var viewModel = {
    listItems: users
};

Этот образец показывает этот подход в действии.

Также вы можете использовать объект пользовательского хранилища для работы с удаленными данными. Посмотрите этот пример - http://jsfiddle.net/sergfry/dssa338u/1/