knockoutをとりあえず使ってみる

JavaScript

knockoutはJacaScriptでMVVMを実現するためのライブラリです。

ダウンロードページからknockout-2.1.0rc2.jsとknockout-2.1.0rc2.debug.jsをダウンロード。どちらも機能は同じですが、knockout-2.1.0rc2.debug.jsはコードが読みやすくなっているのでデバッグ用に使用します。

f:id:chorusde:20120505084311p:image:w500

テストサイトのファイル構成はこんな感じです。

f:id:chorusde:20120505084452p:image

■tutorial1viewmodel.js

function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

■tutorial1view.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>TUtorial 1</title>
		<meta name="description" content="" />
		<meta name="author" content="chorusde" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<script type='text/javascript' src='../lib/jquery/jquery-1.7.2.min.js'></script>
		<script type='text/javascript' src='../lib/knockout/knockout-2.1.0rc2.js'></script>
		<script type='text/javascript' src='../viewmodel/tutorial1viewmodel.js'></script>
		<script type='text/javascript'>
			$(function() {
				//knockout.js を有効化
				ko.applyBindings(new AppViewModel());
			});
		</script>
	</head>
	<body>
		<div>
			<header>
				<h1>Tutorial 1</h1>
			</header>
			<div>
				<p>First name: <strong data-bind="text: firstName"></strong></p>
				<p>Last name: <strong data-bind="text: lastName"></strong></p>
			</div>
			<footer>
				<p>&copy; Copyright by chorusde</p>
			</footer>
		</div>
	</body>
</html>

■結果
f:id:chorusde:20120505092110p:image