Kendo Mobileの実装方法ノックアウトJSで詳細をロードJS

Question

linqを使用して過去2日間のデータを取得している1ページに一連のデータがあります。 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); 
    }