Как реализовать Kendo Mobile «Нажмите, чтобы загрузить больше» в нокаут JS

Question

У меня есть серия данных на одной странице, в которой я получаю данные за последние два дня, используя linq. Я хочу создать кнопку щелчка, которая получает еще 5 дней. Пожалуйста, найдите код для получения двухдневных данных. Мне нужно, чтобы добавить это в мой код нажмите, чтобы загрузить более

https://demos.telerik.com/kendo-ui/m/index#mobile-listview/press-to-load-more

<div data-role="view" id="divData"> 
    <ul data-role="listview" data-bind="ListofEmployeeData"> 
    <li> 
     <span data-bind="text:EmpID"></span> 
     <span data-bind="text:EmpName"></span> 
     <span data-bind="text:Empemail"></span> 
    </li> 
    </ul> 
</div> 

function EmployeeDetails() { 
    self.ListofEmployeeData = ko.observableArray([]); 
    self.getTotalStarRating = function() { 
    ///Mobile DeviceUUId 
    var Model = {deviceUUID: deviceId}; 
    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     data: Model, 
     url: serverUrl + 'xx/xx/xx', 
     success: function (data) { 
     self.ListofEmployeeData($.map(data, function (item) { 
      return new EmployeeModel(item); 
     })); 
     } 
    }); 
    } 
} 

function EmployeeModel(item) 
{ 
    self.EmpID=ko.observable(item.empId); 
    self.EmpName=ko.observable(item.EmpName); 
    self.Empemail=ko.observable(item.Empemail); 
} 

Answer 1

Вы должны иметь свойство в запросе данных на сервере, которые указывают, в какой день вы хотите загрузить или сколько дней и на вашей стороне сервера вы возвращаете данные только на основе этого свойства, которое я называю здесь DayNumber.

Если вам нужно нажать Load больше всего один раз, а не больше, вы можете скрыть свою кнопку в своем успехе ajax. Но если вы хотите продолжать загрузку данных, и вы не представляете, сколько еще осталось данных, вам нужно как-то изменить логику в своем исходном тексте, которые отправляют с данными возврата.

Следующее, что нужно, каждый раз, когда вы получаете данные, нужно вводить новый элемент в свой массив.

Не забудьте оставить this отдельно в каждой модели и подмодели. Кроме того, на ваш взгляд, я вижу вы свяжете <ul data-role="listview" data-bind="ListofEmployeeData"> но вы забыли поставить связывающую имя как foreach :ListofEmployeeData

function EmployeeDetails() { 
    var self = this; 
    self.DayNumber = ko.observable(2); 
    self.ListofEmployeeData = ko.observableArray([]); 

    self.getTotalStarRating = function() { 
    var Model = {deviceUUID: deviceId,DayNumber: self.DayNumber()}; 
    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     data: Model, 
     url: serverUrl + 'xx/xx/xx', 
     success: function (data) { 
     // here based on your logic you need to hide your button load more if there is no more data for example if you know that once you have loaded DayNumber 5 then hide it 
     // if(self.DayNumber() == 5) hide your button 
     $.map(data, function (item) { 
      self.ListofEmployeeData.push(new EmployeeModel(item)); 
     }); 
    }}) 
    } 
    // On your view bind a click event to loadMore as button 
    self.LoadMore = function(){ 
     // here you update DayNumber based on your logic 
     self.DayNumber(5); 
     self.getTotalStarRating(); 
     } 
    } 
    function EmployeeModel(item) 
    { var self = this; 
     self.EmpID=ko.observable(item.empId); 
     self.EmpName=ko.observable(item.EmpName); 
     self.Empemail=ko.observable(item.Empemail); 
    }