Allied ArchitectsAllied ArchitectsEngineer Blog

Knockout.js入門

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のようにごちゃごちゃにならないので好きです。

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

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

RELATION ENTRY

JSでページ遷移しないフォームを作る(Advent Calendar 24日目(仮))

JSでページ遷移しないフォームを作る(A...

2014/12/25 2014 Advent Calendar

こんにちは、Advent Calendar 24日目(仮)を担当する村上です。 昨日の紹介と違う理由は推して知るべしです。 前回と前々回がゆるふわ記事だったのでマジメな記事です。 今回は素のJSでページ遷移しないフォームを作った話を書こうと思います。 目的 ページ遷移しないフォームを作ることが...

続きを読む

シェル芸人への道 その1 (Advent Calendar 16日目)

シェル芸人への道 その1 (Advent...

2014/12/16 Shell

こんにちは、しゃかまるです。 Advent Calendarも16日目です。進捗どうですか?私はダメです。 今回もゆるふわな記事です。 概要 シェル芸ってご存知ですか? こんな感じのことをされている方々です。 私もCUIが好きでgitの操作は全てターミナルでやったりしてるタイプですが、シェル芸人...

続きを読む

しゃかまるの記事一覧へ

ページTOPへ