使用淘汰赛的分页

Question

我能够按如下方式绑定JSON数据：

我的json文件

$(document).ready(function () {

    var jsondata = JSON.parse(var1);
    DisplayFields = function (jsondata) {
        var viewModel = {
            d: ko.observableArray(jsondata),
            pageSize: ko.observable(10),
            pageIndex: ko.observable(0),
            previousPage: function () {
                this.pageIndex(this.pageIndex() - 1);
            },
            nextPage: function () {
                this.pageIndex(this.pageIndex() + 1);
            }
        };
        viewModel.maxPageIndex = ko.dependentObservable(function () {
            return Math.ceil(this.d().length / this.pageSize()) - 1;
        }, viewModel);
        viewModel.pagedRows = ko.dependentObservable(function () {
            var size = this.pageSize();
            var start = this.pageIndex() * size;
            return this.d().slice(start, start + size);
        }, viewModel);
        ko.applyBindings(viewModel, document.getElementById("Datasection"));
        ko.applyBindings(viewModel, document.getElementById("prevnext"));
    };
    DisplayFields(jsondata);    
});

我的HTML文件

    <section class="col-lg-12 paddingBottom40 paddingTop20 RecentInnovation" id="Datasection" data-bind='template: { foreach: pagedRows }'>
        <div class="row">
            <section class="col-lg-1 col-md-1 col-sm-1 col-xs-4">
                <div class="bgOrange blue text-center paddingTop10 paddingBottom10">
                    <span class="size18" data-bind="text: Views"></span>
                    <br>
                    View
                </div>
            </section>
            <section class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                <a data-bind="attr: { href: '../SitePages/IdeaDetails.aspx?ideaid=' + ID }" class="size14 green"><strong><span data-bind="    text: BusinessProblem"></span></strong></a>
                <br>
                <p class="paddingTop5">Category:<span data-bind="text: InnovationType" class="green"></span>&nbsp;&nbsp;Submitted by: <span data-bind="    text: Requester" class="green"></span>&nbsp;&nbsp;On <span data-bind="    text: Created " class="green"></span></p>
                <p class="paddingTop5">Tags: <span data-bind="text: Keywords" class="green"></span>&nbsp;&nbsp&nbsp;Domain: <span data-bind="    text: Domain" class="green"></span>&nbsp;&nbsp&nbsp;SubDomain: <span data-bind="    text: SubDomain" class="green"></span></p>
            </section>
            <section class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-right"><span data-bind="text: Status"></span><span data-bind="    css: statusCss"></span></section>
        </div>

    </section>

我想在页面链接中添加分页（1,2,3,4 ... 10,11），以便用户可以直接进入任何页面。如何修改上面的javascript代码来实现这一点。

由于

Answer 1

HTML：

<span data-bind="with: previousLink">
    <a data-bind="attr: { href: href }, click: $parent.sendPrevPage" title="Previous Page">Previous Page...</a>
</span>
<span data-bind="with: nextLink">
    <a data-bind="attr: { href: href }, click: $parent.sendNextPage" title="Next Page">Next Page...</a>
</span>

JS：

function LinkViewModel(model) {
    model = model || {};
    var self = this;
    self.href = model.Href || ' ';
    self.rel = model.Rel || ' ';
}

executeLink = function (linkVm) {
    $.ajax({
        url: linkVm.href,
        type: "GET",
        success: function (response) {
            //do stuff
        },
        error: function (xhr, ajaxOptions, thrownError) {
            //do stuff
        }
    });
}

self.sendPrevPage = function () {
    executeLink(self.previousLink());
};

self.sendNextPage = function () {
    executeLink(self.nextLink());
};

Answer 2

这是一个非常简单的例子：

HTML：

<div data-bind="foreach: pageNumbers">
    <a data-bind="click: $root.gotoPage, text: pageNumber"></a>
    &nbsp;&nbsp;
</div>

使用Javascript：

var viewModel = function(){
    var self = this;
    self.maxPageIndex = ko.observable(10);
    self.pageNumbers = ko.computed(function() {
        var pages = [];
        for (i=1; i<=self.maxPageIndex(); i++){
            pages.push({pageNumber: i});
        }
        return pages;
    });
    self.gotoPage = function(page){
        console.log("Go to page " + page.pageNumber);
    };
};

ko.applyBindings(new viewModel());

请注意，knockout将范围对象（在本例中为＆＃39; page＆＃39;）传递到click函数中。你不需要连接任何东西，只需从$ root调用click函数，它就会从for循环的范围传入对象......我认为这很酷，但是我＆＃ 39;马哈德那样。

小提琴： http://jsfiddle.net/brettwgreen/jp6hu5ho/