3-KO.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>

	<body>
		<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>
	<script src="js/knockout.js"></script>
	<script>
		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>

</html>