Knockout.js:本家のチュートリアルやバインディング関連

提供:wiki - PCスキルの小技・忘却防止メモ
移動: 案内, 検索

knockout.jsの本家のチュートリアルやバインディング関連の各種サンプル。

目次

knockout.jsの本家

knockout.jsの本家

knockout.js:本家のチュートリアル

intro

  1. Jqueryを使わずにデータを表示
  2. Jqueryを使ってデータを表示
  3. inputのvalueに値をセットして表示
  4. inputのvalueの値を変更したら即反映
  5. ボタンクリックで小文字を大文字に変換

WorkingLists

  1. データ群(配列?)を表示
  2. 表示したデータにレコード追加
  3. 選択した値に合わせて表示データを変更
  4. 表示したデータからをレコード削除
  5. 表示しているレコード数の表示と追加レコード数の制御

SPA(webMail)

  1. データ群(配列?)を表示
  2. ファイルからデータ読込:txtファイルを「$.get」で取得
  3. ファイルからデータ読込:txtファイルを「$.getJSON」で取得
  4. ファイルからデータ読込:各txtファイルを「$.getJSON」
  5. クリックしたデータをレイアウトを変えて表示
  6. クリックしたデータをレイアウトを変えて表示:summy.jsを使う場合

knockout.js:バインディング(Using built-in bindings)

Controlling text and appearance

The visible binding

値が無ければ非表示してくれるバインディング。

  1. Example 1: 表示と非表示
  2. Example 2: 値があれば表示、なければ非表示

The text binding

The html binding

値にHTMLをいれるとそのまま表示してくれるのがHTMLバインディング

The css binding

クラス名を指定することができるcssバインディング。必要に応じてstyleバインディングと使い分ける。

The style binding

style指定ができるstyleバインディング。多くのstyle指定するなら素直にcssバインディングの方がラク。

  1. 条件によって好きなstyleを指定
  2. font-weightやtext-decorationなど

The attr binding

attrバインディングはwidthやhrefなど各種属性の設定が可能なバインディング attrバインディングのサンプルコードは、未作成。

Control flow

The foreach binding

The if binding

「条件が真」のときに何か処理したいときに使えるのがifバインディング

The ifnot binding

ifバインディングは「条件が真」であるのに対して、ifnotバインディングは「条件が偽」のとき。

The with binding

Working with form fields

The click binding

クリックイベントを拾ってくれるのがclickバインディング。ボタン、aタグ、その他のタグでも使える。

  1. Example 1: ボタンクリックでカウント
  2. Example 2: ボタンクリックで値を消していく
  3. Example 3: 「shift + ボタンクリック」と「ボタンクリック」で別処理


The event binding

マウスオーバーとかクリック以外のイベントも拾ってくれるのがeventバインディング

  1. Example 1: マウスオーバーとアウトで文字表示
  2. Example 2: foreachやwith内でのマウスオーバー
  3. Example 3-1: event発生時にパラメータを渡す
  4. Example 3-2: event発生時にパラメータを渡す
  5. Example 3-3: bind()との組み合わせ
  6. Example 4: 子要素でイベント発生時、親要素のイベント発生を防ぐ

The submit binding

inputの「type=text」にカーソルがあったときエンターキーでsubmitバインディングが発動する。clickイベントだと発動しない。

  1. submitバインディングの基本のサンプル

The enable binding

条件が真のとき有効化。input, select, textareaで使える。

  1. Example 1: inputのenable(有効化)
  2. Example 2: 特定の値じゃなければenable(有効化)

The disable binding

条件が真のとき無効化。input, select, textareaで使える。 enableバインディングと同じような使い方なのでサンプルなし。

The value binding

input, select, textareaで使える。

オプションとして値が変わったときに○○するというようなのもあり。(change、keyup、keypress、afterkeydown)「Example 2: input内を修正したら即表示」にサンプル。

  1. Example 1: valueバインディングを使って表示
  2. Example 2: input内を修正したら即表示
  3. Example 3: observableを使わない場合

The hasfocus binding

フォーカスがあたったとき、trueになる。

  1. Example 1: hasfocusの基本型
  2. Example 2: hasfocusの応用型

The checked binding

inputで「type=checkbox」や「type=radio」で「checked=checked」を指定することが可能なのがcheckedバインディング

  1. Example 1: checked=checkedにする
  2. Example 2: checked=checkedで表示・非表示
  3. Example 3: checked=checkedで表示・非表示とradioボタン

The options binding

selectタグで利用可能

  1. Example 1: Drop-down list
  2. Example 2: Multi-select list
  3. Example 3: Drop-down list representing arbitrary JavaScript objects, not just strings
  4. Example 4: Drop-down list representing arbitrary JavaScript objects, with displayed text computed as a function of the represented item

The selectedOptions binding

  1. The selectedOptions binding

The uniqueName binding

Rendering templates

The template binding

  1. Example 1: テンプレートを使用
  2. Example 2: テンプレートをforeachで使用

Creating custom bindings

Creating custom bindings

機能を追加したいとかオリジナルがほしいときように使えるカスタムバインディング

  1. Example 1: 基本的な書式
  2. Example 2: JqueryのslideUp/slideDownを組み込む
  3. Example 3: JqueryのslideUp/slideDownを組み込む:初期値設定
  4. Example 4: hasFocusbバインディングの拡張
  5. タグだけじゃなく、コメントでも利用可能(virtual elements参照)

Controlling descendant bindings

子孫のバインディングを制御するカスタムバインディング

  1. Example 1: 親が真なら子・孫のバインディングは無効
  2. Example 2: 親で指定したものを子・孫に使う
  3. Example 3: 親の親の値を使う(?)

Supporting virtual elements

Further techniques

Loading and saving JSON data

Extending observables

The throttle extender

Unobtrusive event handling

Using fn to add custom functions

Plugins

The mapping plugin

関連項目