Knockout.js

Knockout.js 日本語ドキュメント

http://qiita.com/opengl-8080/items/2b0fb26be865bd5d1890

http://analogic.jp/knockoutjs-summary/

http://kojs.sukobuto.com/docs/observables

http://tech.aainc.co.jp/archives/5346

http://ameblo.jp/ca-1pixel/entry-11298459074.html

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"));