「Knockout.js/clickバインディング」を編集中 (節単位)

== 備考 ==
=== 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>