radios

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

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutExG_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/knockoutExG_init.js"></script>
  </head>
  <body>
	<table border=1>
		<thead>
			<tr>
				<th></th>
				<th>person</th>
				<th>distance</th>
			</tr>
		</thead>
		<tbody data-bind="foreach: people">
			<!-- foreach 節の中では this = $data は people。view-model は $parent -->
			<tr>
				<td>
					<input type="radio" name="person" data-bind="attr: {value: value}, checked: $parent.selected"/>
				</td>
				<td data-bind="click: $parent.rowClick">
					<span data-bind="text: label"></span>
				</td>
				<td data-bind="click: $parent.rowClick">
					<span data-bind="text: distance"></span>
				</td>
			</tr>
		</tbody>
	</table>  
	You selected <span data-bind="text: selected"></span>.
</body>
</html>

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

/*
 * アプリケーションのイニシャライザ.
 */
require.config({

  // Javascript の Base Url
  baseUrl: 'js/lib',

  // ライブラリのパスの別名を定義する
  paths: {
   'app':      '../',
   'knockout' : 'knockout-3.2.0',
  },

  // AMDに対応してないモジュールを読み込む
  shim: {
  }
});

require(['knockout', 'app/knockoutExG_vmodel', 'domReady!'],
  function(ko, vmdl) {
    ko.applyBindings(new vmdl());
  }
);

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

/*
 * アプリケーションの View Model.
 */
define(['knockout'], function(ko) {

	return function appViewModel() {
		var self = this;
		
		self.people = new ko.observableArray([
			{ value: 'b', label: 'Bertington', distance: '1km' },{ value: 'd', label: 'Dentiste', distance: '2km' },
			{ value: 'c', label: 'Charlesforth', distance: '3km' },{ value: 'a', label: 'Angela', distance: '4km' },
			{ value: 'z', label: 'Zara', distance: '23km'}
		]);

		console.log(self.people());
		self.selected = new ko.observable(self.people()[0].value);
		
		self.selectedLabel = ko.computed(function(){
		  return self.selected().label;
		});
		
		self.selected.subscribe(function(){
		  alert("いま選択しなおしたでしょ(`ω')!");
		});
		
	};
});

checks

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

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutExF_checks.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/knockoutExF_init.js"></script>
  </head>
  <body>
	<table border=1>
		<thead>
			<tr>
				<th></th>
				<th>person</th>
				<th>distance</th>
				<th>blog</th>
			</tr>
		</thead>
		<tbody data-bind="foreach: people">
			<!-- foreach 節の中では this = $data は people。view-model は $parent -->
			<tr>
				<td>
					<input type="checkbox" name="person" data-bind="value: $data.label, checked: $parent.checked_persons"/>
				</td>
				<td data-bind="click: $parent.rowClick">
					<span data-bind="text: label"></span>
				</td>
				<td data-bind="click: $parent.rowClick">
					<span data-bind="text: distance"></span>
				</td>
				<td data-bind="click: $parent.rowClick">
					<a data-bind="attr: { href: 'http://www.blogs.com/' + label }, text: label + 'のblog', click: $parent.linkClick, clickBubble: false"></a>
				</td>
			</tr>
		</tbody>
	</table>  
	You selected <span data-bind="text: checked_persons"></span>.
</body>
</html>

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

/*
 * アプリケーションのイニシャライザ.
 */
require.config({

  // Javascript の Base Url
  baseUrl: 'js/lib',

  // ライブラリのパスの別名を定義する
  paths: {
   'app':      '../',
   'knockout' : 'knockout-3.2.0',
  },

  // AMDに対応してないモジュールを読み込む
  shim: {
  }
});

require(['knockout', 'app/knockoutExF_vmodel', 'domReady!'],
  function(ko, vmdl) {
    ko.applyBindings(new vmdl());
  }
);

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

/*
 * アプリケーションの View Model.
 */
define(['knockout'], function(ko) {

	return function appViewModel() {
		var self = this;
		
		self.people = new ko.observableArray([
			{ checked: true, label: 'Bertington', distance: '1km' },{ checked: true, label: 'Dentiste', distance: '2km' },
			{ checked: true, label: 'Charlesforth', distance: '3km' },{ checked: false, label: 'Angela', distance: '4km' },
			{ checked: false, label: 'Zara', distance: '23km'}
		]);

		console.log(self.people());
		self.checked_persons = new ko.observableArray();

		// 初期値設定
		self.people().forEach(function(person) {
			if (person.checked) { self.checked_persons.push( person.label ); }
		});
		
		self.rowClick = function(person) {
			if (self.checked_persons.indexOf(person.label) > -1){
				self.checked_persons.remove(person.label);
			} else {
				self.checked_persons.push(person.label);
			}
		};
		
		self.linkClick = function(person) {
			alert(person.label);
		};
	};
});

select

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

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutExH_select.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/knockoutExH_init.js"></script>
  </head>
  <body>
	<select data-bind="options: people, optionsText: 'label', value: selected"></select>
	<br/>
	You selected <span data-bind="text: selectedLabel"></span>.
</body>
</html>

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

/*
 * アプリケーションのイニシャライザ.
 */
require.config({

  // Javascript の Base Url
  baseUrl: 'js/lib',

  // ライブラリのパスの別名を定義する
  paths: {
   'app':      '../',
   'knockout' : 'knockout-3.2.0',
  },

  // AMDに対応してないモジュールを読み込む
  shim: {
  }
});

require(['knockout', 'app/knockoutExH_vmodel', 'domReady!'],
  function(ko, vmdl) {
    ko.applyBindings(new vmdl());
  }
);

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

/*
 * アプリケーションの View Model.
 */
define(['knockout'], function(ko) {

	return function appViewModel() {
		var self = this;
		
		self.people = new ko.observableArray([
			{ value: 'b', label: 'Bertington', distance: '1km' },{ value: 'd', label: 'Dentiste', distance: '2km' },
			{ value: 'c', label: 'Charlesforth', distance: '3km' },{ value: 'a', label: 'Angela', distance: '4km' },
			{ value: 'z', label: 'Zara', distance: '23km'}
		]);

		console.log(self.people());
		self.selected = new ko.observable(self.people()[0]);
		
		self.selectedLabel = ko.computed(function(){
		  return self.selected().label;
		});
		
		self.selected.subscribe(function(){
		  alert("いま選択しなおしたでしょ(`ω')!");
		});
		
	};
});

値が変わったことを検知する

self.selected.subscribe(function(){
  alert("いま選択しなおしたでしょ(`ω')!");
});

ko.observable() の subscribe イベントフックは、値が変わったときに呼ばれる。
radio, select のサンプルアプリに入ってます

イベントバブル

data-bind="clickBubble: false"

で、下位の (このコンポーネントの背面にある) コンポーネントにイベントが行かないようにする。
check のサンプルアプリのリンクに入っています。リンク以外のところをクリックするとチェックボックスが on/off 。


HTML


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