如何在Knockout JS中实现Kendo Mobile“按加载更多”

时间:2016-12-23 20:26:20

标签: javascript jquery knockout.js kendo-mobile kendo-listview

我在一个页面中有一系列数据,其中我使用linq获取过去两天的数据。我想创建一个单击按钮,可以获得5天以上的数据。请找到获取2天数据的代码。我需要将其添加到我的代码中以加载更多

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

list.h

1 个答案:

答案 0 :(得分:0)

您需要在服务器的数据请求中包含一个属性,指明要加载的日期或天数,在服务器端,您只需根据我在此处调用的属性返回数据DayNumber

如果您需要再按一次加载,而不是更多,您可以在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);
    }