Auction.cshtml

@{
    ViewBag.Title = "SignalR Auction";
}

<div class="row-fluid"">
    <div class="page-header">
        <h1>
        <strong data-bind="text: Title"></strong>
        <small data-bind="text: Info"></small>
        </h1>
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <div class="carousel slide">
            <!-- Carousel items -->
            <div class="carousel-inner" data-bind="foreach: Photos">
                <div class="item" data-bind="css: { active: $index() == 0 }"><img src="/Content/images/none.png" data-bind='    attr: { src: $data }' /></div>
            </div>
            <!-- Carousel nav -->
            <a data-bind="visible: Photos().length > 1" class="carousel-control left" href="#photos" data-slide="prev">&lsaquo;</a>
            <a data-bind="visible: Photos().length > 1" class="carousel-control right" href="#photos" data-slide="next">&rsaquo;</a>
        </div>
    </div>
    <div class="span8">
        <div data-bind="html: Details"></div>
        <h2 data-bind="text: CurrentPrice"></h2>
        <p><span data-bind="text: TimeRemainingText"></span> remaining</p>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/ko-signalr")
    <script type="text/javascript" src="~/signalr/hubs"></script>
    @Scripts.Render("~/bundles/home/auction")
}

auction.js

/// <reference path="../jquery-1.9.1.js" />
/// <reference path="../knockout-2.2.0.js" />
/// <reference path="../moment.js" />

$(function () {

    console.log("starting auction script");

    function AuctionViewModel() {
        var self = this;
        self.Id = ko.observable(0);
        self.AuctionTitle = ko.observable("Momenteel geen veiling actief");
        self.Title = ko.observable("BCC veilingsite");
        self.Info = ko.observable("Starten...");
        self.Details = ko.observable();
        self.RegularPrice = ko.observable();
        self.CurrentPrice = ko.observable();
        self.Available = ko.observable();
        self.Photos = ko.observableArray();
        self.TimeRemaining = ko.observable(0);
        self.TimeRemainingText = ko.computed(function () {
            return moment.duration(self.TimeRemaining()).humanize();
        });
        self.ProgressRemaining = ko.observable(100);
        self.loading = ko.observable(true);
    }

    // declare the viewmodel
    var vm = new AuctionViewModel();

    // apply knockout bindings
    ko.applyBindings(vm);

    // start signalr and get current product
    $.connection.hub.logging = true;
    $.connection.hub.start()
        .done(function () {
            // Call the Initialize function on the server. Will respond with auctionInitialized message
            $.connection.auctionHub.server.initialize();
        })
        .fail(function () {
            console.log("Could not Connect!");
        });

    // Handle connection loss and reconnect in a robust way
    var timeout = null;
    var interval = 10000;
    $.connection.hub.stateChanged(function (change) {
        if (change.newState === $.signalR.connectionState.reconnecting) {
            timeout = setTimeout(function () {
                console.log('Server is unreachable, trying to reconnect...');
            }, interval);
        }
        else if (timeout && change.newState === $.signalR.connectionState.connected) {
            console.log('Server reconnected, reinitialize');
            $.connection.auctionHub.initialize();
            clearTimeout(timeout);
            timeout = null;
        }
    });

    $.connection.auctionHub.client.auctionInitialized = function (args) {
        console.log("auctionInitialized called", args);

        vm.Id(args.Id);
        vm.AuctionTitle(args.AuctionTitle);
        vm.Title(args.Title);
        vm.Info(args.Info);
        vm.Details(args.Details);
        vm.RegularPrice(Globalize.format(args.RegularPrice, "c"));
        vm.CurrentPrice(Globalize.format(args.CurrentPrice, "c"));
        vm.Available(args.Available);

        // need to stop carousel during data refresh: it can't handle it
        $('.carousel').carousel('pause');
        vm.Photos.removeAll();
        vm.Photos.push(args.Photo1);
        if (args.Photo2) { vm.Photos.push(args.Photo2); }
        if (args.Photo3) { vm.Photos.push(args.Photo3); }
        if (args.Photo4) { vm.Photos.push(args.Photo4); }
        if (args.Photo5) { vm.Photos.push(args.Photo5); }
        $('.carousel').carousel('cycle');

        vm.TimeRemaining(args.TimeRemaining);
        vm.ProgressRemaining(args.ProgressRemaining);

        if (args.Id == 0) {
            vm.loading(false);
        }
    }

    $.connection.auctionHub.client.auctionUpdated = function (args) {
        console.log("auctionUpdated called", args);

        vm.CurrentPrice(Globalize.format(args.CurrentPrice, "c"));
        vm.ProgressRemaining(args.ProgressRemaining);
        vm.TimeRemaining(args.TimeRemaining);

        vm.loading(false);
    }

    $.connection.auctionHub.client.availableUpdated = function (args) {
        console.log("availableUpdate called : " + arguments[0]);
        vm.Available(args.Available);
    }


    // start the bootstrap image carousel component
    $('.carousel').carousel({
        interval: 10000
    });

    console.log("finished page initialization!");
});

BundleConfig.cs

    // ....
    bundles.Add(new ScriptBundle("~/bundles/ko-signalr").Include(
                "~/Scripts/jquery.signalR-{version}.js",
                "~/Scripts/knockout-{version}.js"));
    //...
    bundles.Add(new ScriptBundle("~/bundles/home/auction").Include(
                "~/Scripts/site/auction.js"));
    //...