しゃかまる

2013.10.11

Knockout.js入門

こんにちは、村上です。
世間はMH4ですが、今さら地球防衛軍2にはまってます。
似たようなものだと思ってます。モンハンやったことない勢ですこんにちは。

さて、前の記事で「次回はAngularJSについて書きたいと思います」と言っておいて
今回のテーマはKnockoutです。Angularはそのうち書きたいです…
今回は入門記事として、どうやって使うの?ってとこを書こうと思います。

Knockout.jsの概要や、どんな感じなのかのサンプルは前回の私の記事
青山さんの記事をご覧ください。

導入〜作り始め

Knockout.jsのインストールは簡単です。
http://knockoutjs.com/downloads/index.html
からJSファイルを取得し、scriptタグで読み込めば使えるようになります。

Knockoutの利用は

  • 1. ViewModelを作成
  • 2. ViewModel内に監視対象の値を作成する
  • 3. Knockoutを有効にする
  • 4. HTML要素のdata-bind属性で動作を指定

という流れになります。

この辺りが、前の記事で書いた内容です。
ちなみに、ViewModelは1つしか有効に出来ません。
2つ以上applyBindingsすると動作がおかしくなりました。

Knockoutに値を監視させるには

と、します。
observable()の中で指定した値が初期値になります。
次項で、HTMLへの記述を解説します。

Bindings

HTMLには、Knockoutで処理したいタグ内にdata-bind属性を追加します。
data-bindにイベントを記載すると、JSの値に合わせて表示を変更したり、クリックイベントを持ってくれたりします。

実際に見てみた方が早いので、以下のコードを用意しました。
余計なものは省略しています。

HTML

JavaScript

 

上記のコードを動かすとこんな感じになります

Knockout bindings SAMPLE

この文字が表示されたり消えたりします

いろいろ入れましたが、順番に見て行きましょう。

このサンプルで使っているBindingは
click、disable、checked, visibleです。
clickイベントは以下のように定義します。

この要素をクリックするとclickFunctionメソッドが呼ばれます。
clickFunctionではalertを表示しているだけですが、3回以上クリックすると
「押しすぎです」とメッセージを変更します。

ko.observableに指定した値を取得したり変更するには、こんな感じで変数() とします。

単一のHTML要素に複数のイベントを割り当てることも可能で、data-bind内に ‘,’繋ぎで書きます。

clickFunction() 内でカウントを取っており、3回クリックされたらbuttonDisable にtrueを代入しています。
disable 条件が満たされると、クリックできなくなります。
今回はinput要素なのでdisableが効きますが、aタグなどにはdisableが効かないのでその辺はCSSでどうにかしましょう。もちろん、Knockoutでスタイルやcssの付け替えもできます。

チェックボックスに

とすると、チェックボックスのチェック状態が showElement の値に紐付きます。
今回は showElement の初期値にtrueを入れているので、デフォルトでチェックが入った状態になります。

その下のPタグには

としているので、文字の表示を制御出来ます。
この showElement の値は上のチェックボックスで変更しているので
チェックボックスの状態に紐付いて表示を制御できます。

基本的な使い方はこのようになります。
双方向バインドはコード量が少なく済みますし、デザインへの依存が少ないので使いやすいですね。
個人的にはjQueryのようにごちゃごちゃにならないので好きです。

次回はもう少し踏み込んだ内容を書きたいと思います。