Question

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

淘汰赛脚本

     $.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));
    };

Answer 1

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

首先，创建一个可以绑定的observable来告诉用户数据是否正在加载

$.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!
        }
    });
};

检查是否已从Knockout中的服务器返回所有数据

1 个答案: