Question

我在淘汰赛中有以下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调用返回的数据的总页数。

该行： disable：$ root.page（）== $ root.talkData（）。TotalPageCount

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

任何帮助表示感谢。

感谢。

Answer 1

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

$.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
});

在这种特殊情况下 - 我使用获取承诺'完成'来获取数据。检查jquery docs - 他们有一些额外的示例，说明了使用/使用返回参数的方式。

Answer 2

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

基本上，我使用了与AJAX的正常淘汰数据绑定，并且在从服务器检索数据之后，我调用了插件。你可以在这里找到插件。 its called Simple Pagination

分类问题与淘汰赛js

2 个答案: