環境構築
[1] 以下のサイトからJSをダウンロードする
or
CDN(Content Delivery Networks)用のURL(http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js)をコピーする
http://knockoutjs.com/downloads/index.html[2] コンテンツをインポートする <script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
サンプル
例1：Hello World!
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
</head>
<body>
<div data-bind="text: message"></div>
<script>
window.onload = function() {
var viewModel = {message: 'Hello World!'};
ko.applyBindings(viewModel);
};
</script>
</body>
</html>
出力結果
Hello World!
例2：SELECT BOX
http://jsfiddle.net/MikeEast/nM6dd/2/より
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
</head>
<body>
<div>
<select data-bind="options: items, optionsText: 'name', value: selected"></select>
<span data-bind="text: selected().name"></span>
<script type="text/javascript">
var ViewModel = function () {
this.items = ko.observableArray([
{ id: 1, name: "Mike" },
{ id: 2, name: "Tom"},
{ id: 3, name: "Smith"}
]);
this.selected = ko.observable();
};
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
例3：SELECT BOX/multiple
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
</head>
<body>
<select size="5" multiple
data-bind="options: array, selectedOptions: selectedArray"></select>
<script>
var viewModel = {
array: ['Japan', 'USA', 'UK', 'China', ''],
selectedArray: ['USA', 'China']
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
参考文献
http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_03.htmlhttp://www.buildinsider.net/web/bookjslib111/89
http://qiita.com/opengl-8080/items/2b0fb26be865bd5d1890
http://analogic.jp/knockoutjs-summary/
デモ
http://kojs.sukobuto.com/tips/helloWorld