Проверка, были ли все данные возвращены с сервера в Knockout

Question

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

Нокаут сценарий

 $.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 завершает загрузку одной страницы пользователей, так как это только данные которые я вижу в коде выше. Вот один из способов вы можете сделать это:

Во-первых, создать наблюдаемую где-то, что вы можете связывать, чтобы сообщить пользователю, если данные загружаются

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

И добавить разметку, которая показывает что-то в пользовательском интерфейсе при данные загружаются

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

затем установите DataIsLoading, прежде чем сделать вызов Ajax, а затем сбросить его, когда вызов выполняется

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