如何在 Knockout JS 中实现 Kendo Mobile "Press to load More"
How to Implement Kendo Mobile "Press to load More" in Knockout JS
我在一页中有一系列数据,我在其中使用 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);
}
您需要在对服务器的数据请求中有一个 属性 来指示您要加载哪一天或多少天,并且在您的服务器端您仅 return 基于该数据的数据属性我这里叫它DayNumber
。
如果您只需要按一次加载更多,而不是再按一次,您可以在 ajax 成功时隐藏您的按钮。但是,如果您想继续加载数据并且不知道还剩下多少数据,则需要以某种方式更改后端中发送 return 数据的逻辑。
接下来,您需要在每次获取数据时将新元素推送到数组。
不要忘记在每个模型和子模型中保持 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);
}
我在一页中有一系列数据,我在其中使用 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);
}
您需要在对服务器的数据请求中有一个 属性 来指示您要加载哪一天或多少天,并且在您的服务器端您仅 return 基于该数据的数据属性我这里叫它DayNumber
。
如果您只需要按一次加载更多,而不是再按一次,您可以在 ajax 成功时隐藏您的按钮。但是,如果您想继续加载数据并且不知道还剩下多少数据,则需要以某种方式更改后端中发送 return 数据的逻辑。
接下来,您需要在每次获取数据时将新元素推送到数组。
不要忘记在每个模型和子模型中保持 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);
}