So implementieren Sie Kendo Mobile "Drücken Sie, um mehr zu laden" in Knockout JS

Question

Ich habe eine Reihe von Daten auf einer Seite, in denen ich Daten der letzten zwei Tage mit Linq bekommen. Ich möchte eine Schaltfläche erstellen, die 5 Tage mehr Daten erhält. Bitte finden Sie den Code für 2 Tage Daten. Ich brauche diese Presse meines Code hinzufügen mehr

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

Sie müssen laden Sie eine Eigenschaft in der Datenanforderung an den Server haben, an welchem ​​Tag Sie angeben wollen oder laden, wie viele Tage und Auf Ihrer Serverseite geben Sie nur Daten zurück, die auf dieser Eigenschaft basieren. Ich nenne sie hier DayNumber.

Wenn Sie Load mehr nur einmal drücken müssen und nicht mehr können Sie Ihre Schaltfläche in Ihrem Ajax Erfolg verstecken. Aber wenn Sie weiterhin Daten laden möchten und Sie keine Ahnung haben, wie viel mehr Daten übrig sind, müssen Sie die Logik irgendwie in Ihrem Backend ändern, das mit Rückgabedaten sendet.

Als nächstes müssen Sie jedes Mal, wenn Sie Daten erhalten, ein neues Element in Ihr Array einfügen.

Vergessen Sie nicht, this separat in jedem Modell und Untermodell zu behalten. Auch in Ihrer Ansicht Ich sehe, Sie binden <ul data-role="listview" data-bind="ListofEmployeeData"> aber Sie vergessen haben, verbindlich Namen zu setzen wie 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); 
    }