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