Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 92 lines (83 sloc) 3.4 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
@{
    Layout = "_layout.cshtml";
}


<script src="@Url.Content("~/Scripts/jquery.signalR.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    var converterHub = $.connection.converterHub;

    converterHub.addLatestConversion = function(latestConversion) {
        $('<li>' + latestConversion + '</li>').prependTo($('#latestContainer'));
    };

    var converter = function(name) {
        this.name = name;
        this.result = ko.observable(' ');
        this.processing = ko.dependentObservable(function() {
            return !this.result();
        }.bind(this));
        this.execute = function(input) {
            this.result('');
            converterHub.executeAsync(this.name, input)
                .done(function(result) {
                    this.result(result || ' ');
                }.bind(this));
        }.bind(this);
    };

    var viewModel = function () {
        this.input = ko.observable();
        this.timeout = { };
        this.input.subscribe(function(input) {
            clearTimeout(this.timeout);
            this.timeout = setTimeout(function() {
                converterHub.reportConversion(input);
                ko.utils.arrayForEach(this.converters(), function(c) {
                    c.execute(input);
                });
            }.bind(this), 500);
        }.bind(this));
        // Normally this would be needed, but with the mapping plugin
        // it's magically added and we can bind to it like any observable.
        // this.converters = ko.observableArray([]);
    };

    var mapping = {
        'converters' : {
            create : function (options) {
                return new converter(options.data.Name);
            }
        }
    };

    $(document).ready(function () {
        var vm = new viewModel();
        ko.mapping.fromJS(@Html.Raw(Model), mapping, vm);
        ko.applyBindings(vm);
        $.connection.hub.start(function() {
            converterHub.getPreviousConversions(function (previousConversions) {
                ko.utils.arrayForEach(ko.utils.parseJson(previousConversions), function(c) {
                    converterHub.addLatestConversion(c);
                });
            });
        });
    });
</script>

<div class="row span">
    <form action="" class="form-stacked">
        <fieldset class="clearfix">
            <div class="span14">
                <label for="prependedInput">Convert something</label>
                <div class="input">
                    <div class="input-prepend">
                        <span class="add-on">Convert</span>
                        <input class="xlarge" data-bind="value: input, valueUpdate: 'keyup'" id="prependedInput" name="prependedInput" size="16" type="text">
                    </div>
                    <span class="help-block">Enter any string</span>
                </div>
            </div>
        </fieldset>
    </form>
</div>
<div class="row span" data-bind="foreach: converters">
    <div class="span5 well box">
        <img class="pull-right" data-bind="visible: processing" src="@Url.Content("~/Content/images/ajax-loader.gif")"/>
        <h3 data-bind="text: name"></h3>
        
        <textarea class="xlarge" rows="4" data-bind="text: result()"></textarea>
    </div>
</div>
Something went wrong with that request. Please try again.