knockout.js - ko.pager 与真实数据的连接

Question

非常具体的家伙，

我需要帮助来了解如何将 ko.pager（来自https://github.com/remcoros/ko.pager）连接到我们的真实数据。

我使 JQuery Ajax 调用如下

   $.ajax({
    url: config.EnvironmentDomain + config.ProductController + '/?PageSize=' + pageSize  
    + '&ActiveOnly=' + activeOnly +'&Index=' + startIndex,                   
    type: "GET",
        success: function (data)
        {
           ko.applyBindings(new RealDataVeiwModel(data), document.getElementById('EachProductList'));
           ko.applyBindings(new PagerViewModel(data.length), document.getElementById('pg'));
        },
        error: function () { }
    });

你能解释一下这里的管道吗？

如果 AJAX 调用从数据库返回 150 条记录，并且在我的页面上每页将显示 15 条记录，并且 ko.pager 导航也应该工作？

我是 Knockout.js 的新手，您的帮助将鼓励我更多地学习它。我会感谢你的帮助。

问候。

Answer 1

所以，玩这个，我得到了解决方案。这里是....

所以，我像往常一样进行 AJAX 调用以从服务器获取数据

$.ajax({
url: config.EnvironmentDomain + config.ProductController + '/?PageSize=' + ps + '&ActiveOnly=' + 
ao + '&Index=' + si,
type: "GET",
async: false,
success: function (data) {                        

ko.applyBindings(new PageViewModel(data.length), document.getElementById('pg'));
dataFromServer = data;
Rendering();
},
error: function () { }
});

其中 dataFromServer 是简单的 JS 全局变量，用于临时保存来自服务器的数据（以 JSON 格式）。

我的渲染功能做 DHTML

function Rendering(){
var fromPage = parseInt($(".pagexofx").children(".FI").text());
var toPage = parseInt($(".pagexofx").children(".LI").text());    
var totalCount = dataFromServer.length;
var si = fromPage - 1;
var ei = toPage;

for (var x = si; x < ei; x++) {
div.append('<ul id="eachProd" style="list-style: none" class="remove">' +
'<li>' +
'<div style="border:2px solid black;" class="span4">' +
'<p>&nbsp;&nbsp;<strong><span>' + dataFromServer[x].Name + '</span></strong></p>' +
'<p>&nbsp;&nbsp;<strong>SKU:</strong><span>&nbsp;<strong>' + dataFromServer[x].SKU     
+ '</strong></span></p>' +
'<p>&nbsp;&nbsp;<strong>Last Updated:</strong><span>&nbsp;' + getFormattedDate(dataFromServer
[x].LastUpdateTS) + '</span></p>' +
'&nbsp;&nbsp;<a href="">Edit</a>&nbsp;&nbsp;/&nbsp;&nbsp;<a 
href="">Qty./Price</a>&nbsp;&nbsp;/&nbsp;&nbsp;' +
'<a href="">Copy</a>&nbsp;&nbsp;/&nbsp;&nbsp;<a href="">Delete</a>' +
'</div>' +
'</li>' +
'</ul>'
)
}   
}

我的 PageView 模型在下面....

var PageViewModel = function (len) {    
var self = this;
self.SetTotalResults = ko.observable(30);
// holds the total item count
self.TotalResults = ko.observable(len);
// actual pager, used to bind to the pager's template    
self.Pager = ko.pager(self.TotalResults);
// Subscribe to current page changes.
self.Pager().CurrentPage.subscribe(function () {       
    self.search();
});
self.search = function () {  
    self.TotalResults(dataFromServer.length);
}    

} // /视图模型