これは何?

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

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


ソースコード

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

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

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

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

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

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


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2019-07-30 (火) 01:58:54 (135d)
Short-URL: https://hondou.homedns.org:443/pukiwiki/index.php?cmd=s&k=fd04aaaa30
ISBN10
ISBN13
9784061426061