しゃかまる

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に値を監視させるには

hoge = ko.observable('ほげ');
fuga = ko.observableArray();

1 2	hoge = ko.observable('ほげ'); fuga = ko.observableArray();

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

Bindings

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

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

HTML

<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>

<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

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() &gt; 2) {
            message = '押しすぎです';
            this.buttonDisable(true);
        }
        alert(message);
    };
};

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イベントは以下のように定義します。

data-bind="click: clickFunction"

1	data-bind="click: clickFunction"

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

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

this.clickCounter(); // 値を取得します
this.clickCounter(1); // 値を変更します

1 2	this.clickCounter(); // 値を取得します this.clickCounter(1); // 値を変更します

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

data-bind="click: clickFunction, disable: buttonDisable()"

1	data-bind="click: clickFunction, disable: buttonDisable()"

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

チェックボックスに

<input type="checkbox" data-bind="checked: showElement"/>

1	<input type="checkbox" data-bind="checked: showElement"/>

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

その下のPタグには

<p data-bind="visible: showElement">この文字が表示されたり消えたりします</p>

1	<p data-bind="visible: showElement">この文字が表示されたり消えたりします</p>

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

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

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

しゃかまる

フロントエンドだったりバックエンドだったりサーバだったりその時の流行りと気分でいろいろ迷走してます。

RELATION ENTRY

しゃかまるの記事一覧へ

▶︎