![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
HTML KnockoutJS radio,check,select 及 event bubble |
<!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>/*
* アプリケーションのイニシャライザ.
*/
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());
}
);/*
* アプリケーションの 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("いま選択しなおしたでしょ(`ω')!");
});
};
});
<!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>/*
* アプリケーションのイニシャライザ.
*/
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());
}
);/*
* アプリケーションの 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);
};
};
});
<!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>/*
* アプリケーションのイニシャライザ.
*/
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());
}
);/*
* アプリケーションの 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 。
