これは何? †
サンプルアプリケーション †
ソースコード †
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockdown.js ExE</title>
<style>
</style>
<script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutExE_init.js"></script>
<script id="linkNodeTemplate" type="text/html">
<li>
<!-- ko if: $data.url -->
<a data-bind="attr: { href: url, title: label }, text: label"></a>
<!-- /ko -->
<!-- ko if: $data.list -->
<span data-bind="text: label"></span>
<ul data-bind="template: { name: 'linkNodeTemplate', foreach: list }">
</ul>
<!-- /ko -->
</li>
</script>
</head>
<body>
<ul data-bind="template: { name: 'linkNodeTemplate', foreach: list }">
</ul>
</body>
</html>
/*
* アプリケーションのイニシャライザ.
*/
require.config({
// Javascript の Base Url
baseUrl: 'js/lib',
// ライブラリのパスの別名を定義する
paths: {
'app': '../',
'knockout' : 'knockout-3.2.0',
},
// AMDに対応してないモジュールを読み込む
shim: {
}
});
require(['knockout', 'app/knockoutExE_vmodel', 'domReady!'],
function(ko, vmdl) {
ko.applyBindings(new vmdl());
}
);
/*
* アプリケーションの View Model.
*/
define(['knockout'], function(ko) {
return function appViewModel() {
var self = this;
self.list = ko.observableArray([
{ label : 'a' , list : [
{label : 'a1' , url : 'http://www.a1.com' },
{label : 'a2' , url : 'http://www.a2.com' },
{label : 'a3' , url : 'http://www.a3.com' }
]},
{ label : 'b' , list : [
{label : 'ba', list : [
{label : 'ba1' , url : 'http://www.ba1.com' },
{label : 'ba2' , url : 'http://www.ba2.com' },
{label : 'ba3' , url : 'http://www.ba3.com' }
]},
{label : 'bb', list : [
{label : 'bb1' , url : 'http://www.bb1.com' },
{label : 'bb2' , url : 'http://www.bb2.com' },
{label : 'bb3' , url : 'http://www.bb3.com' }
]},
{label : 'bc' , url : 'http://www.bc.com' }
]},
{ label : 'c' , list : [
{label : 'cc1' , url : 'http://www.cc1.com' },
{label : 'cc2' , url : 'http://www.cc2.com' },
{label : 'cc3' , url : 'http://www.cc3.com' }
]},
{label : 'd' , url : 'http://www.dd.com' },
]);
console.log(self.list());
};
});
HTML
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
