HTML

<!DOCTYPE html>
<html>
<head>
<title>たいとる</title>
<meta name="viewport" c ontent="width=device-width">
<meta charset="UTF-8" />
</head>
<body>

<p>ファーストネーム: <input data-bind="value: firstName" /></p>
<p>ラストネーム: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

<hr />
<p><input type="text" data-bind="value: message, valueUpdate: 'afterkeydown'"></p>
<p id="result" data-bind="text: message">ここに入力されたテキストと同じものが入る</p>

<script type="text/javascript" src="knockout-3.3.0.js"></script>
<script type="text/javascript" src="main01.js"></script>

</body>
</html>

JS

// ViewModel を定義します
var ViewModel = function(first, last) {
   this.firstName = ko.observable(first);
   this.lastName = ko.observable(last);

   this.message = ko.observable('');

   this.fullName = ko.computed(function() {
       return this.firstName() + " " + this.lastName();
   }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth"));