PhoneJS 14.1 List with Loading

by tabalinas

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.6/css/dx.ios7.default.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.6/css/dx.common.css">
<script src="http://cdn3.devexpress.com/jslib/14.1.6/js/dx.phonejs.debug.js"></script>
<div data-bind="dxList: { dataSource: dataSource, pullRefreshEnabled: true }"></div>
<div data-bind="dxLoadPanel: { visible: loadPanelVisible, message: loadPanelMessage }"></div>

JavaScript

DevExpress.devices.current({ platform: "ios", deviceType: "phone" });

var loadPanelVisible = ko.observable(false);
var loadPanelMessage = ko.observable("Getting fresh data...");

function loadData(loadOptions) {
    if (loadOptions.refresh) {
        
        loadPanelVisible(true);
        var resultData = new $.Deferred();
        
        // NOTE: instead of async ajax call
        setTimeout(function() {
            resultData.resolve(["red","orange","yellow","green","lightblue","blue","violet"]);
            loadPanelVisible(false);
        }, 3000);
        
        /*$.ajax({
            type: 'GET',
            url: 'https://xxx.azure-mobile.net/tables/message',
            async: false,
            headers: {
                "X-ZUMO-APPLICATION": "gdftrgertrtfhgfdfgdsgdfthgdf"
            }
        }).done(function (result) {
            resultData.resolve(result);
            loadPanelVisible(false);
        });*/
        
        return resultData.promise();        
    
    }
}

var vm = {
    dataSource: {
        changed: new $.Callbacks(),
        load: loadData
    },        
    loadPanelMessage: loadPanelMessage,
    loadPanelVisible: loadPanelVisible
};

ko.applyBindings(vm);