これは何?

サンプルアプリケーション

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /KnockoutExam/knockoutExE_RecursiveTemplate.html


ソースコード

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutExE_RecursiveTemplate.html

<!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>

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutExE_init.js

/*
 * アプリケーションのイニシャライザ.
 */
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());
  }
);

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutExE_vmodel.js

/*
 * アプリケーションの 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


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2019-07-30 (火) 02:11:37 (1930d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=3fa726f309
ISBN10
ISBN13
9784061426061