gistfile1.txt

<script type="text/javascript" src="~/signalr/hubs"> </script>
<script src="~/Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
<script src="~/Scripts/kendo/2012.1.515/js/kendo.all.min.js"></script>
<script src="~/Scripts/knockout-kendo.min.js"></script>
<script src="~/Scripts/knockout.mapping-latest.debug.js"></script>
<script type="text/javascript">
    ko.bindingHandlers['withlight'] = {
        'init': function () {
            return { 'controlsDescendantBindings': true };
        },
        'update': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var bindingValue = ko.utils.unwrapObservable(valueAccessor());

            if (typeof bindingValue != 'object' || bindingValue === null) return;

            var innerContext = bindingContext['createChildContext'](bindingValue);
            ko.applyBindingsToDescendants(innerContext, element);
        }
    };

    function AirplaneViewModel() {
        var self = this,
            canSave = false;

        self.hub = $.connection.mainHub;
        self.Airplane = ko.observable();

        self.init = function () {
            self.hub.getPlane('xxx');
        };

        self.hub.updatePlane = function(aModel) {
            canSave = false;
            self.Airplane(ko.mapping.fromJS(aModel));
            canSave = true;
        };

        self.Changed = ko.computed(function () {
            return ko.mapping.toJSON(self.Airplane);
        });

        self.Changed.subscribe(function (jsonOutingMapping) {
            if (canSave) {
                self.hub.savePlane(jsonOutingMapping);
            }
        });
    }

    $(function () {
        var airplaneModel = new AirplaneViewModel();
        $.connection.hub.start()
            .done(function () {
                airplaneModel.init();
            })
            .fail(function () { alert("Fail to connecto!"); });

        ko.applyBindings(airplaneModel);
    });
</script>
<h3>Header</h3>
    <link href="../../Content/kendo/2012.2.710/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/kendo/2012.2.710/kendo.default.min.css" rel="stylesheet" type="text/css" />
<div id="AirPlane" data-bind="withlight:Airplane">
    <div>
        <label>Name:</label>
        <input type="text" id="EngineName" data-bind="value: Name"/>
    </div>        
    <div data-bind="kendoGrid: Engines"> </div>
    <ul id="messages"></ul>
</div>