こんにちは、村上です。
世間は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に値を監視させるには
1 2 |
hoge = ko.observable('ほげ'); fuga = ko.observableArray(); |
と、します。
observable()の中で指定した値が初期値になります。
次項で、HTMLへの記述を解説します。
Bindings
HTMLには、Knockoutで処理したいタグ内にdata-bind属性を追加します。
data-bindにイベントを記載すると、JSの値に合わせて表示を変更したり、クリックイベントを持ってくれたりします。
実際に見てみた方が早いので、以下のコードを用意しました。
余計なものは省略しています。
HTML
1 2 3 4 5 |
<p>Knockout bindings SAMPLE</p> <input class="buttonLink mb20" value="click me" type="button" data-bind="click: clickFunction, disable: buttonDisable()"/> <label><input type="checkbox" data-bind="checked: showElement"/> チェックを外すと下の文字が消えます</label> <p class="mb20" data-bind="visible: showElement">この文字が表示されたり消えたりします</p> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var ViewModel = function() { this.clickCounter = ko.observable(0); this.buttonDisable = ko.observable(false); this.showElement = ko.observable(true); this.clickFunction = function() { this.clickCounter(this.clickCounter() + 1); var message = 'クリックしました'; if (this.clickCounter() > 2) { message = '押しすぎです'; this.buttonDisable(true); } alert(message); }; }; |
上記のコードを動かすとこんな感じになります
Knockout bindings SAMPLE
この文字が表示されたり消えたりします
いろいろ入れましたが、順番に見て行きましょう。
このサンプルで使っているBindingは
click、disable、checked, visibleです。
clickイベントは以下のように定義します。
1 |
data-bind="click: clickFunction" |
この要素をクリックするとclickFunctionメソッドが呼ばれます。
clickFunctionではalertを表示しているだけですが、3回以上クリックすると
「押しすぎです」とメッセージを変更します。
ko.observableに指定した値を取得したり変更するには、こんな感じで変数() とします。
1 2 |
this.clickCounter(); // 値を取得します this.clickCounter(1); // 値を変更します |
単一のHTML要素に複数のイベントを割り当てることも可能で、data-bind内に ‘,’繋ぎで書きます。
1 |
data-bind="click: clickFunction, disable: buttonDisable()" |
clickFunction() 内でカウントを取っており、3回クリックされたらbuttonDisable にtrueを代入しています。
disable 条件が満たされると、クリックできなくなります。
今回はinput要素なのでdisableが効きますが、aタグなどにはdisableが効かないのでその辺はCSSでどうにかしましょう。もちろん、Knockoutでスタイルやcssの付け替えもできます。
チェックボックスに
1 |
<input type="checkbox" data-bind="checked: showElement"/> |
とすると、チェックボックスのチェック状態が showElement の値に紐付きます。
今回は showElement の初期値にtrueを入れているので、デフォルトでチェックが入った状態になります。
その下のPタグには
1 |
<p data-bind="visible: showElement">この文字が表示されたり消えたりします</p> |
としているので、文字の表示を制御出来ます。
この showElement の値は上のチェックボックスで変更しているので
チェックボックスの状態に紐付いて表示を制御できます。
基本的な使い方はこのようになります。
双方向バインドはコード量が少なく済みますし、デザインへの依存が少ないので使いやすいですね。
個人的にはjQueryのようにごちゃごちゃにならないので好きです。
次回はもう少し踏み込んだ内容を書きたいと思います。
フロントエンドだったりバックエンドだったりサーバだったり その時の流行りと気分でいろいろ迷走してます。