Skip to content

Instantly share code, notes, and snippets.

@nantekkotai
Last active December 11, 2015 11:28
Show Gist options
  • Save nantekkotai/4593386 to your computer and use it in GitHub Desktop.
Save nantekkotai/4593386 to your computer and use it in GitHub Desktop.
[knockoutjs]クリックイベントの設定

クリックイベント

knockout.jsにはイベントはそれなりにあります。
詳しくは公式ドキュメントを読んでもらうとして、ここでは一番使いどころの多い「click」イベントについて説明します。

<div>
  You've clicked <span data-bind="text: numberOfClicks"></span> times
  <button data-bind="click: incrementClickCounter">Click me</button>
</div>
 
<script type="text/javascript">
  var viewModel = {
        numberOfClicks : ko.observable(0),
        incrementClickCounter : function() {
          var previousCount = this.numberOfClicks();
          this.numberOfClicks(previousCount + 1);
        }
      };
  ko.applyBindings(viewModel);
</script>

「Click me」を押すとnumberOfClicksのところがカウントアップします。
いたって簡単です。

clickさせたい要素に data-bind="click: eventName" とし、viewModel側に対応するeventName関数を設置すれば問題なく動作します。
これはclickだけでなくて、他のイベントも同一のルールで動きます。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment