差分
ナビゲーションに移動
検索に移動
PSS
,PlayStation Suiteへのリダイレクト
#redirect [[Knockout.jsPlayStation Suite]]の'''clickバインディング'''とは、[[DOM]]要素がクリックされたときに、パラメーターで指定されたJavaScript関数が呼び出されるようにする[[Knockout.js/操作バインディング|操作バインディング]]である。 クリックと言えば主に[[HTML]]のbuttonタグやinputタグ、aタグで使われると思うが、それ以外にも目に見えているDOM要素であれば何でもclickバインディングを付けることができる。 clickバインディングは、基本的に[[knockout.js/eventバインディング|eventバインディング]]のうち、多用されるであろうクリックイベントを短縮表記できるようにしたものなので挙動は同一である。よって、「[[knockout.js/eventバインディング|eventバインディング]]」のページも見ろ。 == パラメーター ==clickバインディングの基本的な書式は以下のとおりである。<source lang="html5"><button data-bind="click: 関数名または匿名関数">押してみろ！</button><div data-bind="click: 関数名または匿名関数">クリックしてみろ！</div></source> clickバインディングのパラメーターにはクリックした際に実行したいビューモデルの関数名を指定する。 また「click: someObject.someFunction」と記述することでビューモデル以外の任意の[[JavaScript]]の関数を指定することもできる。さらに「click: function(data, event) {}」と匿名関数を記述することもできたりする。 === 追加パラメーター ======= clickBubble ====clickバインディングが入れ子になっていて、かつ子要素側でクリックされると、[[knockout.js]]はデフォルトで親要素のclickバインディングまで実行してしまう。 そのようなことを抑制したい場合には、'''clickBubble'''パラメーターに「false」を設定する。そうすることで親要素へのイベントの伝搬は停止される。 <source lang="html5"><!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>knockout.js - clickバインディング</title> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="knockout-2.0.0.js"></script> <script type="text/javascript"> jQuery(function() { // ビューモデル var AppViewModel = function() { var self = this; self.divClick = function() { alert("div click!"); }; self.buttonClick = function() { alert("button click!"); }; }; // バインディング適用 ko.applyBindings(new AppViewModel()); }); </script></head><body> <div data-bind="click: divClick"> <button data-bind="click: buttonClick"> 押してみろ！その１ </button> <button data-bind="click: buttonClick, clickBubble: false"> 押してみろ！その２ </button> </div></body></html></source> == 備考 ===== clickで指定された関数には「現在のアイテム」を渡す ===[[Knockout.js/withバインディング|withバインディング]]や[[Knockout.js/foreachバインディング|foreachバインディング]]のブロック内でclickバインディングを用いると、clickで呼ばれる関数の第一引数にwithやforeachで展開された各オブジェクトが自動的に渡される。 なお、ブロックの外側でclickバインディングを使うと第一引数にビューモデルが丸ごと渡される。 <source lang="html5"><!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>knockout.js - clickバインディング 001</title> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="knockout-2.0.0.js"></script> <script type="text/javascript"> jQuery(function() { // ビューモデル var AppViewModel = function() { var self = this; self.places = ko.observableArray([ { name: 'London', japanese: 'ロンドン' }, { name: 'Paris' , japanese: 'パリ' }, { name: 'Tokyo' , japanese: '東京' }, ]); self.removePlace = function(val) { // valはself.places内の各オブジェクト self.places.remove(val); }; self.clickButton = function(val) { // valはAppViewModelインスタンス（≒この例ではselfと同じモノ） alert(val); }; }; // バインディング適用 ko.applyBindings(new AppViewModel()); }); </script></head><body> <ul data-bind="foreach: places"> <li> <span data-bind="text: $data.name"></span> <button data-bind="click: $parent.removePlace">削除</button> </li> </ul> <button data-bind="click: clickButton">押すな！</button> </body></html></source> ==== みどころ1 ====[[Knockout.js/withバインディング|withバインディング]]や[[Knockout.js/foreachバインディング|foreachバインディング]]のブロック内で入れ子になっている場合は、各種バインディングの際に「$parent」や「$root」などのプレフィックスを付ける必要がある。 詳細は[[Knockout.js/foreachバインディング|foreachバインディング]]の項目を参照。 ==== みどころ2 ====AppViewModelオブジェクト内の[[コンストラクタ]]でthis変数をself変数に代入しているが、これは主に[[AJAX]]を使ったときの結果受信時に非同期で呼ばれるコールバック関数内でthis変数が再定義されてしまう問題を回避するためである。 この例ではthis変数もself変数も同じものだが、後々のことを考えてそういう風にしておきましょうという、一種の[[JavaScript]界でよく使われる[[デザインパターン]]だそうだ。 <source lang="html5"><!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>knockout.js - clickバインディング 001</title> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="knockout-2.0.0.js"></script> <script type="text/javascript"> jQuery(function() { // ビューモデル var AppViewModel = function() { var self = this; self.clickButton = function(val) { // これ true alert(this == self); jQuery.get("021_click.html", null, function(val) { // これ false alert(this == self); }); }; }; // バインディング適用 ko.applyBindings(new AppViewModel()); }); </script></head><body> <button data-bind="click: clickButton">押すな！</button></body></html></source> === 既定のクリックアクションを有効化する ===[[knockout.js]]でclickバインディングを設定すると、既定のクリックアクションが無効化される。たとえばHTMLのaタグにclickバインディングを適用してあると、hrefプロパティで指定されたリンク先へは飛ばなくなる。 これでは困るという場合には、clickバインディングで指定した関数が戻り値としてtrueを返すようにすると、既定のクリックアクションを有効化することができる。 <source lang="html5"><!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>knockout.js - clickバインディング</title> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="knockout-2.0.0.js"></script> <script type="text/javascript"> jQuery(function() { // ビューモデル var AppViewModel = function() { var self = this; // 飛ばない self.clickButton = function(val) { alert("click!"); }; // return trueで<a href="">のリンク先へ飛ぶ self.clickButtonWithJump = function(val) { alert("click!"); return true; }; }; // バインディング適用 ko.applyBindings(new AppViewModel()); }); </script></head><body> <a data-bind="click: clickButton" href="http://search.yahoo.co.jp/search?p=site%3Amonobook.org">Yahoo検索１</a><br/> <a data-bind="click: clickButtonWithJump" href="http://search.yahoo.co.jp/search?p=site%3Amonobook.org">Yahoo検索２</a><br/></body></html></source> == 関連項目 ==* [[Knockout.js]]** [[Knockout.js/可視バインディング|可視バインディング]]** [[Knockout.js/制御フローバインディング|制御フローバインディング]]** [[Knockout.js/操作バインディング|操作バインディング]] == 参考文献 ==<references/>== 外部リンク == {{stub}}
