Kendo Mobile을 구현하는 방법 Knockout JS에서 More를로드하려면 누르십시오

Question

linq를 사용하여 지난 이틀간의 데이터를 가져 오는 일련의 데이터가 한 페이지에 있습니다. 5 일간 더 많은 데이터를 가져 오는 버튼 클릭을 만들고 싶습니다. 2 일간의 데이터를 가져 오는 코드를 찾으십시오. 내가로드 내 코드의 언론이를 추가 할 필요가 당신은 당신이 얼마나 많은 일로드하거나 할 일 나타내는 서버에 데이터 요청 속성을 가질 필요가

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이라고 부릅니다.

더 이상로드하지 않고 더 이상로드하지 않으려면 아약스 성공에 대한 버튼을 숨길 수 있습니다. 그러나 데이터를 계속로드하려는 경우 데이터가 얼마나 남았는지 알지 못하는 경우 반환 데이터를 보내는 백엔드에서 로직을 변경해야합니다.

다음은 데이터를 얻을 때마다 새로운 요소를 배열에 푸시해야합니다.

각 모델 및 하위 모델에서 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); 
    }