CODEWITHSUNDEEP
jqueryknockout.js
Ramesh
Ramesh

Reputation: 13

Create a multiple instances for a ViewModel in knockout.js

I am creating a Pager control using knockout. I have a viewModel(PaginatorViewModel) which has properties "currentPageIndex", "itemsPerPage", "totalRecords" etc. In each page, I have two pagination controls one on TOP and the other one on Bottom of the page.

In some cases, I have tabs,in each tab I have two pagination controls (TOP and Bottom).

When I was in Tab1 and moved to page 2 (currentPageIndex=2), the pagination control in the Tab2 also displaying the currentPageIndex as 2.

I want to use the PaginatorViewModel in all the tabs, but want maintain multiple instances i...e one instance for each tab.

How can I achieve this.

Here is my ViewModel,

var CustomPaginator = {        
        //The current page index of the post being displayed.
        currentPageIndex: ko.observable(1),
        //specifies the page options
        pageOptions : ko.observableArray([25, 50, 100, 200]),

        //specifies the PageOptions will be shown or not.
        showOptions : ko.observable(true),                
        //The maximum number of topics displayed per page.
        itemsPerPage : ko.observable(25),
        //Specifies the total no of records
        totalRecords : ko.observable(1),
        isVisible : ko.observable(false),
        //pageIndex is bounded to the text box, and the CurrentPageIndex contains the actual value.
        // this is to avoid the notifying the subscribers when the user enters the out of range values
        // like 0,and N , where N > no of pages
        pageIndex : ko.observable(1)
  };

How Can I Create an instance for this.

Thanks, Ramesh

Upvotes: 1

Views: 1985

Answers (1)

Paul Manzotti
Paul Manzotti

Reputation: 5147

Create a viewmodel for each paginator, then bind each one to the element of the page you want it to be used in:

var page1 = new CustomPaginator();
ko.applyBindings(page1, $('#page1')[0]);

Do this for each one. You can also bind the same viewmodel to different parts of the page, if that's something you want to do.

You will need to change how you define your view model, so that you can create new instances of it:

var CustomPaginator = function()
{
    //your view model properies here
}

Upvotes: 3

Related Questions