Resetting the page

Now that we've wired up our numeric paging links, a problem has become apparent. Sometimes, when changing the number of items per page, an empty table is displayed.

We can fix this by adding another binding to the <select> element that resets the current page whenever the <select>element's value changes.

Engage Thrusters

First of all we can add the new binding to the HTML. Change the <select> element so that it appears as follows:

<select id="perPage" data-bind="value: pageSize, event: { 
    change: goToFirstPage
}">

Now we can add the goToFirstPage() method to the ViewModel:

goToFirstPage: function () {
    this.currentPage(0);
}

Objective Complete - Mini Debriefing

First of all we added the event binding as a second binding to the <select> element responsible for setting the number of items per page. The format of this binding is slightly different than other bindings we've used in this project.

After the name of the binding, event in this case...