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