淘汰页面保留旧页面上的jquery对话框取消并打开

时间:2015-03-12 21:50:26

标签: javascript jquery asp.net knockout.js

我有敲除分页的问题。我在jquery对话框上使用淘汰分页。问题是当我从page1导航到page2,page3或page4并关闭对话框并再次打开对话框时我看到我关闭的页面最后但不是从第一页开始。接下来的jsfiddle。如果您有任何问题,请告诉我。

http://jsfiddle.net/bharatgillala/yuvNt/57/

    var data = [
        {Player:"PAGE1", runs:"34889"},
        {Player:"PAGE1", runs:"83366"},
        {Player:"PAGE1", runs:"52534"},
        {Player:"PAGE2", runs:"02232"},
        {Player:"PAGE2", runs:"55899"},
        {Player:"PAGE2", runs:"90483"},
        {Player:"PAGE3", runs:"02565"},
        {Player:"PAGE3", runs:"98500"},
        {Player:"PAGE3", runs:"20285"},
        {Player:"PAGE4", runs:"57757"},
    ];
       var StaticDataExample1 = function(data){
       // stuff I care about
       this.items = ko.observableArray(data);

    // pager related stuff
       ------------------------------
        this.currentPage = ko.observable(1);
        this.perPage = 3;
        this.pagedItems = ko.computed(function(){
        var pg = this.currentPage(),
            start = this.perPage * (pg-1),
            end = start + this.perPage;
        return this.items().slice(start,end);
        }, this);
        this.nextPage = function(){
        if(this.nextPageEnabled())
            this.currentPage(this.currentPage()+1);
        };
        this.nextPageEnabled = ko.computed(function(){
        return this.items().length > this.perPage * this.currentPage();
        },this);
        this.previousPage = function(){
        if(this.previousPageEnabled())
            this.currentPage(this.currentPage()-1);
         };
        this.previousPageEnabled = ko.computed(function(){
        return this.currentPage() > 1;
    },this);
   };

ko.applyBindings(new  StaticDataExample1(data),document.getElementById("test"));
       $(document).on("click", "[id*=atest]", function () 
       {
         $("#test" ).dialog(
       {
        height: 420,
        width: 430,
        modal: true,   
        buttons: [
        {
            text: "Save",
        },
       {
           text: "Cancel",
           tabIndex: -1,
           click: function () {
               $(this).dialog("close");
           }
       }
        ],     
        close: function () { }
        });
        });

1 个答案:

答案 0 :(得分:0)

你几乎就在那里。

将您的ko.applyBindings更改为:

var model = new StaticDataExample1(data);
ko.applyBindings(model, document.getElementById("test"));

然后在open:选项后面的$(...).dialog({ ... })选项中添加close:功能:

    close: function () {
    },
    open: function () {
        model.currentPage(1);
    }

在这里小提琴:http://jsfiddle.net/yuvNt/63/

刚才我想到了;如果您不想添加model.currentPage(1);函数,甚至可以将close:调用添加到现有的open:函数中。

希望这很有用。