Knockout.js/eventバインディング
Knockout.jsのeventバインディングとは、関連付けられたDOM要素において、パラメーターで指定したイベントが発生したときに、パラメーターで指定されたJavaScript関数が呼び出されるようにする操作バインディングである。
keypressやmouseover、mouseoutなど、任意のイベントをバインドすることができる。
パラメーター
clickバインディングの基本的な書式は以下のとおりである。
<div data-bind="event: { イベント名: 関数名 }>ほげほげ</div>
eventバインディングのパラメーターには、検出したいイベント名と、検出した際に実行する関数名を指定する。
また「event: { mouseover: someObject.someFunction }」などと記述することでビューモデル以外の任意のJavaScriptの関数を指定することもできる。さらに「event: { mouseover: function(data, event) {}」などと匿名関数を記述することもできたりする。
追加パラメーター
イベント名Bubble
eventバインディングが入れ子になっていて、かつ子要素側でイベントが発生すると、knockout.jsはデフォルトで親要素のeventバインディングまで実行してしまう。
そのようなことを抑制したい場合には、「イベント名Bubble(たとえば「mouseoverBubble」)」という形式のパラメーターに「false」を設定する。そうすることで親要素へのイベントの伝搬は停止される。
備考
イベントとクリック
クリックに関してはclickバインディングが用意されているが、eventバインディングのイベント名に「click」と指定しても同じ動作をする。ようするにclickバインディングはeventバインディングの中でも多用されるであろうということで用意されている短縮表記である。
よって、自動的に渡される引数などの挙動も同一なので、このページの記述に漏れがあるかもしれないので、clickバインディングのページも見ろ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockout.js - eventバインディングと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.buttonClick = function() {
alert("button click!");
return true;
};
};
// バインディング適用
ko.applyBindings(new AppViewModel());
});
</script>
</head>
<body>
<div>
<button data-bind="event: { click: buttonClick, clickBubble: false }">
押してみろ!その1
</button>
<button data-bind="click: buttonClick, clickBubble: false">
押してみろ!その2
</button>
</div>
</body>
</html>