Untitled

<!DOCTYPE html>
<html>
<head>
    <title>KnockOut JS Test</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/site.css" rel="stylesheet"/>
    <script src="/Scripts/modernizr-2.8.3.js"></script>
    <script src="/Scripts/jquery-3.3.1.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
</head>
<body>
    <script type="text/javascript" src="/Scripts/knockout-3.4.2.js">
        $(document).ready(function () {
            // Here's my data model
            var ViewModel = function (first, last) {
                this.firstName = ko.observable(first);
                this.lastName = ko.observable(last);

                this.fullName = ko.computed(function () {
                    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
                    return this.firstName() + " " + this.lastName();
                }, this);
            };

            ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
        }
    </script>

    <div class='liveExample'>
        <p>First name: <input data-bind='value: firstName' /></p>
        <p>Last name: <input data-bind='value: lastName' /></p>
        <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
    </div>
</body>
</html>