Knockout JS Based Paging/Item Scrolling

It's been bugging me for days on how to do this. Feel free to better it! I'm sure it can be improved.

by ian_smithz

HTML

<script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
 <a href="#" data-bind="click: ChangeViewableDates.bind($data, 'decr')">Back</a>

<div class="dates" data-bind="foreach: DisplayedDates()">
    <div class="date" data-bind="text: $data.date"></div>
</div> 

<a href="#" data-bind="click: ChangeViewableDates.bind($data, 'incr')">Forward</a>

<p data-bind="text: 'Page: ' + CurrentPage()"></p>
<p data-bind="text: 'Total Dates: ' + Dates().length"></p>

CSS

.dates {
            width: 370px;
            height: 100px;
            overflow: hidden;
            margin: 20px;
        }
        .date {
            width: 78px;
            height: 98px;
            border: 1px solid #999;
            float: left;
            margin-left: 10px;
        }

JavaScript

var dates = [{
            "id": 1,
                "date": "04-12-1990"
        }, {
            "id": 2,
                "date": "15-10-2005"
        }, {
            "id": 3,
                "date": "09-02-1996"
        }, {
            "id": 4,
                "date": "30-06-2009"
        }, {
            "id": 5,
                "date": "30-04-1992"
        }, {
            "id": 6,
                "date": "08-12-2010"
        }, {
            "id": 7,
                "date": "27-02-1994"
        }, {
            "id": 8,
                "date": "13-12-2007"
        }, {
            "id": 9,
                "date": "05-06-2003"
        }, {
            "id": 10,
                "date": "29-09-1992"
        }];

        var config = {
            shownAtOnce: 4,
            passThrough: true
        };

        var viewmodel = function ItemScollerViewModel(initDates) {
            var self = this;

            self.config = {
                direction: {
                    back: "decr",
                    forward: "incr"
                }
            }

            self.Dates = ko.observableArray(dates);
            self.CurrentPage = ko.observable(1);
            self.DisplayedDates = ko.observableArray(dates);

            self.ChangeViewableDates = function (direction, b) {
                var pages = Math.ceil(self.Dates().length / config.shownAtOnce);
                var goToIndex = 0;
                var selected;

                switch (direction) {
                    case self.config.direction.back:
                        if (self.CurrentPage() != 1) {
                            goToIndex = (self.CurrentPage() * config.shownAtOnce) - (config.shownAtOnce * 2);
                            selected = self.Dates().slice(goToIndex);
                            self.CurrentPage(self.CurrentPage() - 1);
                            self.DisplayedDates(selected);
                        }
                        else if(config.passThrough){
             ...