knockout.jsの表示の内外でクリックしたときHtmlに何かする

すべての「a.BehaviorClick」に対してイベントを追加したい。

1. <script type="text/javascript">
2.   $(document).ready(function () {
3.     ko.applyBindings(new ViewModel());
4.     BindOfClickEvent();
5.   });
6.   
7.   function ViewModel() {
8.     var self = this;
9.     self.jsonData = ko.observableArray();
10.     $.getJSON("./testdata/testdataB.txt", {}, function(json){
11.         self.jsonData(json.item);
12.       }
13.     );
14.   }
15.   
16.   function BindOfClickEvent()
17.   {
18.     $('a.BehaviorClick').bind('click', EventWhenClick);
19.   }
20.   
21.   var EventWhenClick = function (e) {
22.     // htmlに何かしたい。
23.     ～色を変えたり文字サイズをいじったり画像を変更したり～
24.     return false;
25.   };
26.   
27. </script>
28.  
29. <table>
30.   <tbody>
31.   <tr>
32.     <td><a href="#" class="BehaviorClick">～～</a></td>
33.   </tr>
34.   </tbody>
35. </table>
36. <table>
37.   <tbody data-bind="foreach: jsonData">
38.     <tr>
39.       <td data-bind="text: name"></td>
40.       <td><a href="#" class="BehaviorClick">～～</a></td>
41.     </tr>
42.   </tbody>
43. </table>

※これだと動作しないです。

上記の場合、2つめのtable内のリンクが動かない。

koのclickバインディングとかやってみたり、アレコレしてたけど上記の「EventWhenClick」ってのに入ってくる「e」の値が異なる。
ということで、条件分岐をしてあげる必要あり。その際、引数の数を一つ増やす。

「EventWhenClick」で引数を二つにする必要あり。
一つ目の引数は
・koの内から呼び出された場合：ko.observableとかでの値
・koの外から呼び出された場合：htmlのDOMみたいなヤツ
二つ目の引数は
・koの内から呼び出された場合：色々な値を持ったヤツ（object）
・koの外から呼び出された場合：undefined

この二つ目の引数のなかに「target」ってのがいて、コイツがhtmlのDOMみたいなヤツ。

参考：
knockout.jsの表示の内外でクリックしたときに何かする