0

我在淘汰赛中有以下 html 绑定

<div data-bind="with: talkData">
    <div data-bind="foreach: Talks">
        <p data-bind="text: Title"></p>
    </div>
</div>

<p>
    <button class="btn btn-success previous" 
            data-bind="click: $root.PageBack, disable: $root.page() == 1">Prev</button>                         
    <button class="btn btn-success next" 
            data-bind="click: $root.PageNext, disable: $root.page() == $root.talkData().TotalPageCount">Next</button>
</p>

使用以下模型：

$(function() {
    function TalksViewModel() {
        var self = this;
        self.page = ko.observable(1);
        self.records = ko.observable(1);
        self.totalPages = ko.observable(1);
        self.talkData = ko.observable();

        self.IsPrevEnabled = isPrevEnabled;

        function pageBack(item) {
            self.page(self.page() - 1);
            loadDataFromServer();
        }

        self.PageBack = pageBack;

        function pageNext(item) {
            console.log("page next");
            self.page(self.page() + 1);
            loadDataFromServer();
        }

        self.PageNext = pageNext;

        function loadDataFromServer() {
            var url = '/Talks/GetPagedTalks';
            self.talkData(null);
            $.get(url, { page: self.page() }, self.talkData);
        }

        // Initial page
        loadDataFromServer();        
    }

    ko.applyBindings(new TalksViewModel());
});

从“GetPagedTalks”调用返回的 JSON 是：

Talks: [{Title:Philippians 1:12-26,…}, {Title:Philippians 1:1-11,…}, {Title:Devoted   Lives: ,…}]
0: {Title:Philippians 1:12-26,…}
1: {Title:Philippians 1:1-11,…}
2: {Title:Devoted Lives: ,…}
TotalPageCount: 59
TotalRowCount: 177

下一个和上一个按钮有效，但我真的很难知道如何从 GET 调用返回的数据中设置总页数。

该行：禁用：$root.page() == $root.talkData().TotalPageCount

根本不工作。我假设 TotalPageCount 将是talkData 的一部分。

任何帮助表示赞赏。

谢谢。

4

2 回答 2

0

要设置数据（值和页数），请尝试以下操作：

$.get(url, { page: self.page() })
 .done(function(data){
    self.talkData(data);
    self.totalPages(data.TotalPageCount);
    self.records(data.TotalRowCount);
})
.fail(function(xhr,status,error){
  // handle any error here
});

在这种特殊情况下 - 我使用 get promise 'done' 来获取数据。检查 jquery文档 - 他们有一些额外的示例，您可以使用/使用返回参数的方式。

于 2013-05-29T22:26:52.973 回答
0

这篇文章很老了，但如果有人遇到同样的问题，你可以用一种非常简单的方式实现分页，而不必担心它的内部结构。（这里http://contractnamespace.blogspot.com/2014/02/pagination-with-knockout-jquery.html）。

基本上，我使用 AJAX 的普通敲除数据绑定，从服务器检索数据后，我调用插件。你可以在这里找到插件。它称为简单分页。

于 2014-02-20T08:33:56.077 回答