これは何? †
サンプルアプリケーション †
ソースコード †
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockdown.js ExD</title>
<style>
</style>
<script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutExD_init.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>left</th>
<th>right</th>
</tr>
</thead>
<tbody data-bind="foreach: people">
<!-- foreach 節の中では this = $data は people。view-model は $parent -->
<tr>
<td>
<label>
<input type="radio" name="person" data-bind="attr: {value: $data[0].value}, checked: $parent.selected"/>
<span data-bind="text: $data[0].label"></span>
</label>
</td>
<td>
<!-- ko if: $data.length > 1 -->
<label>
<input type="radio" name="person" data-bind="attr: {value: $data[1].value}, checked: $parent.selected"/>
<span data-bind="text: $data[1].label"></span>
</label>
<!-- /ko -->
</td>
</tr>
</tbody>
</table>
You selected <span data-bind="text: selected"></span>.
</body>
</html>/*
* アプリケーションのイニシャライザ.
*/
require.config({
// Javascript の Base Url
baseUrl: 'js/lib',
// ライブラリのパスの別名を定義する
paths: {
'app': '../',
'knockout' : 'knockout-3.2.0',
},
// AMDに対応してないモジュールを読み込む
shim: {
}
});
require(['knockout', 'app/knockoutExD_vmodel', 'domReady!'],
function(ko, vmdl) {
ko.applyBindings(new vmdl());
}
);/*
* アプリケーションの View Model.
*/
define(['knockout'], function(ko) {
return function appViewModel() {
var self = this;
self.people = new ko.observableArray([
[{ value: 'b', label: 'Bertington' },{ value: 'd', label: 'Dentiste' }],
[{ value: 'c', label: 'Charlesforth' },{ value: 'a', label: 'Angela' }],
[{ value: 'z', label: 'Zara'}]
]);
console.log(self.people());
self.selected = new ko.observable(self.people()[0][0].value.toString());
};
});
HTML
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
