0

我在用户页面上显示来自用户的数据，并且我想在加载所有数据并且没有更多数据可以使用敲除从服务器检索时通知用户。

淘汰赛脚本

     $.views.Roster.GetPage = function ( pageNumber) {
        $.grain.Ajax.Get({
            Url: Views.Roster.Properties.Url,
            DataToSubmit: { pageNumber: pageNumber, id: Views.Roster.Properties.Id },
            DataType: "json",
            OnSuccess: function (data, status, jqXHR) {
                $.views.Roster.RosterViewModel.AddUsers(data);
            },
            OnError: function (jqXHR, status, errorThrown) {
                var _response = $.parseJSON(jqXHR.responseText);
                $.pnotify({ title:_response.title, text: _response.Message, type: _response.TypeString});
            }
        });
    };
    $.views.Roster.ViewModel = {
        RosterUsers: ko.observableArray([]),
        TotalRoster: null,
        CurrentPage: ko.observable(1)
    };

$.views.Roster.BindModel = function (data) {
        var self = $.views.Roster.ViewModel;

        $.views.Roster.ViewModel.TotalRoster = ko.computed(function () {
            return self.RosterUsers().length;
        });

        $.views.Roster.RosterViewModel.AddUsers(data);
        ko.applyBindings($.views.Roster.ViewModel);
    }
    Next = function () {
        var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
        $.views.Roster.ViewModel.CurrentPage(_page);
        $.views.Roster.GetPage(_page);
    };

    $.views.Roster.RosterViewModel = function (data) {
        $.views.Roster.RosterViewModel.AddUsers(data);
    };

    $.views.Roster.RosterViewModel.AddUsers = function (data) {
        $.each(data, function (index, value) {
            $.views.Roster.RosterViewModel.PushUser(value);
        });
    };

    $.views.Roster.RosterViewModel.PushUser = function (user) {
        $.views.Roster.ViewModel.RosterUsers.push(new $.views.Roster.UserViewModel(user));
    };
4

1 回答 1

0

当您说“加载所有数据后”时，我假设您的意思是当 GetPage 方法完成加载单个用户页面时，因为这是我在上面的代码中看到的唯一数据加载。这是您可以做到的一种方法：

首先，在可以绑定的地方创建一个可观察对象，以告诉用户是否正在加载数据

$.views.Roster.ViewModel = {
    RosterUsers: ko.observableArray([]),
    TotalRoster: null,
    CurrentPage: ko.observable(1),
    DataIsLoading: ko.observable(false)
};

并添加一些标记，在数据加载时在 UI 中显示某些内容

<div data-bind="visible:DataIsLoading">Data is Loading, please wait...</div>

然后在进行ajax调用之前设置DataIsLoading，然后在调用完成时重置它

$.views.Roster.GetPage = function ( pageNumber) {
    $.views.Roster.ViewModel.DataIsLoading(true);  // Add this!
    $.grain.Ajax.Get({
        Url: Views.Roster.Properties.Url,
        DataToSubmit: { pageNumber: pageNumber, id: Views.Roster.Properties.Id },
        DataType: "json",
        OnSuccess: function (data, status, jqXHR) {
            $.views.Roster.RosterViewModel.AddUsers(data);
            $.views.Roster.ViewModel.DataIsLoading(false);  // Add this!
        },
        OnError: function (jqXHR, status, errorThrown) {
            var _response = $.parseJSON(jqXHR.responseText);
            $.pnotify({ title:_response.title, text: _response.Message, type: _response.TypeString});
            $.views.Roster.ViewModel.DataIsLoading(false);  // Add this!
        }
    });
};
于 2013-04-19T19:36:45.183 回答