Knockout.jsのサンプル

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

目次

内容別

モーダルウィンドウ

  1. knockout.jsでモーダルウィンドウ
  2. モーダルウィンドウでカレンダーから年月日入力:閉じるボタンとか装飾あり
  3. モーダルウィンドウでカレンダー(省略版)から年月日入力
  4. カレンダーから年月日を入力するってのを複数設置
  5. カレンダーから年月日を入力するってのを複数設置・改

form関連

  1. selectで初期値あり
  2. selectで選択したものを表示
  3. selectで初期値あり:連想配列ちっく
  4. selectで選択したものを表示:連想配列ちっく
  5. selectで選択したものを表示:連想配列ちっく2
  6. ボタンクリックでinputタグに切替(enableバインディング)
  7. ボタンクリックでinputタグに切替(ifバインディング)
  8. ボタンクリックでinputタグに切替(ifとtemplateバインディング)
  9. ボタンクリックでinputタグに切替(三項演算子とtemplateバインディング)
  10. inputに入力したらフォーカスが外れずとも即反映
  11. formの入力と値のサンプル
  12. formの入力と値のサンプル:必須入力ありで、ボタンの有効・無効
  13. formでEnterキーで送信
  14. formで入力・確認・終了画面の切替
  15. checkboxとradioの選択された値の取得
  16. フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける
  17. フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける:slideDown/slideUp版
  18. カレンダーから年月日を入力するってのを複数設置

サブウィンドウから親ウィンドウへ関連

  1. knockout.jsで親ウィンドウに値を渡す
  2. knockout.jsで親ウィンドウに値を渡す:確定ボタンをデフォルトで非表示
  3. knockout.jsで親ウィンドウに値を渡す:子で追加ボタンが押されたとき表示(styleの追加)
  4. knockout.jsで親ウィンドウに値を渡す:子で追加ボタンが押されたとき表示(cssの追加)

if・条件分岐関連

  1. ifで表示の切替
  2. ifとtemplateの組み合わせ
  3. ボタンクリックでinputタグに切替(ifバインディング)
  4. ボタンクリックでinputタグに切替(ifとtemplateバインディング)
  5. ifバインディングを使わずに真・偽で条件分岐:三項演算子
  6. ifバインディングを使わずに真・偽で条件分岐:三項演算子2
  7. ボタンクリックでinputタグに切替(三項演算子とtemplateバインディング)

クリックなどイベント関連

  1. clickでCSS変更
  2. clickした行のデータの一部表示
  3. clickした行にcss追加
  4. clickした行にcss追加:他はcss削除
  5. clickした行にcss追加:他はcss削除2
  6. clickした行にcss追加:他はcss削除3
  7. clickした行にcss追加して、別ページ開く
  8. ボタンクリックでinputタグに切替(enableバインディング)
  9. ボタンクリックでinputタグに切替(ifバインディング)
  10. ボタンクリックでinputタグに切替(ifとtemplateバインディング)
  11. クリックした行をアラートで表示
  12. クリックしたカラムでソート
  13. クリックしたカラムでソート2
  14. クリックしたカラムでソート3 - koでのソート最終形
  15. クリックしたカラムでソート4 - koでのソート最終形・ソート部をjQueryにしただけ。
  16. ボタンクリックでinputタグに切替(三項演算子とtemplateバインディング)
  17. inputに入力したらフォーカスが外れずとも即反映
  18. knockout.jsの表示の内外でクリックしたときに何かする

jqGrid関連

  1. jqGridバインディングの余分な箇所を削除したシンプルなヤツ
  2. jqGridバインディングで一部styleバインディングを指定

カスタムバインディング

  1. 「クリックしたらアラート表示」というカスタムバインディング
  2. 「カレンダー」のカスタムバインディング
  3. 特定の文字を装飾したい2 - カスタムバインディング - 用途としては検索結果から検索した文字列を強調表示したいときなど。カスタムバインディングを使う。
  4. 特定の文字を装飾したい2改 - カスタムバインディング - 用途としては検索結果から検索した文字列を強調表示したいときなど。カスタムバインディングを使う。
  5. 特定の文字を装飾したい3 - カスタムバインディング - 用途としては検索結果から検索した文字列を強調表示したいときなど。対象の文字列を入力できるように修正したもの。

作成順

  1. selectで初期値あり
  2. selectで選択したものを表示
  3. selectで初期値あり:連想配列ちっく
  4. selectで選択したものを表示:連想配列ちっく
  5. selectで選択したものを表示:連想配列ちっく2
  6. clickでCSS変更
  7. foreachで配列の表示
  8. clickした行のデータの一部表示
  9. clickした行にcss追加
  10. clickした行にcss追加:他はcss削除
  11. clickした行にcss追加:他はcss削除2
  12. clickした行にcss追加して、別ページ開く
  13. データが無ければ別の何かを表示
  14. ボタンクリックでinputタグに切替(enableバインディング)
  15. ifで表示の切替
  16. ifとtemplateの組み合わせ
  17. ボタンクリックでinputタグに切替(ifバインディング)
  18. ボタンクリックでinputタグに切替(ifとtemplateバインディング)
  19. Jsonデータの読込み
  20. 空データの追加
  21. クリックした行をアラートで表示
  22. クリックしたカラムでソート
  23. クリックしたカラムでソート2
  24. styleバインディングの記述例
  25. jqGridバインディングの余分な箇所を削除したシンプルなヤツ
  26. jqGridバインディングで一部styleバインディングを指定
  27. ifバインディングを使わずに真・偽で条件分岐:三項演算子
  28. ifバインディングを使わずに真・偽で条件分岐:三項演算子2
  29. ボタンクリックでinputタグに切替(三項演算子とtemplateバインディング)
  30. 条件無しのclass名の指定
  31. inputに入力したらフォーカスが外れずとも即反映
  32. 配列(オブジェクト?)の中にある配列(オブジェクト?)の出力
  33. knockout.jsの表示の内外でクリックしたときに何かする
  34. knockout.jsでデータの検索ができるようにする
  35. knockout.jsでDOMから値を取得
  36. knockout.jsで親ウィンドウに値を渡す
  37. knockout.jsでDOMから値をボタンなしで取得
  38. knockout.jsで親ウィンドウに値を渡す:確定ボタンをデフォルトで非表示
  39. knockout.jsで親ウィンドウに値を渡す:子で追加ボタンが押されたとき表示(styleの追加)
  40. knockout.jsで親ウィンドウに値を渡す:子で追加ボタンが押されたとき表示(cssの追加)
  41. formの入力と値のサンプル
  42. formの入力と値のサンプル:必須入力ありで、ボタンの有効・無効
  43. formでEnterキーで送信
  44. formで入力・確認・終了画面の切替
  45. checkboxとradioの選択された値の取得
  46. フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける
  47. フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける:slideDown/slideUp版
  48. knockout.jsでモーダルウィンドウ
  49. 「クリックしたらアラート表示」というカスタムバインディング
  50. 「カレンダー」のカスタムバインディング
  51. カレンダーでクリックされた年月日を取得・表示(カスタムバインディングは挫折)
  52. モーダルウィンドウでカレンダーから年月日入力:閉じるボタンとか装飾あり
  53. モーダルウィンドウでカレンダー(省略版)から年月日入力
  54. モーダルウィンドウでカレンダークラスを使用して年月日入力
  55. 共通処理のクラス化
  56. ko内でのインスタンス(ビューモデルオブジェクトのインスタンス化?)
  57. カレンダーから年月日を入力するってのを複数設置
  58. koでtemplate内でtemplateを使う
  59. koでチェックボックスでCSSの切替え
  60. データ全部の色、指定したデータの色をcheckboxで変更
  61. カレンダーから年月日を入力するってのを複数設置・改
  62. ローカルに保存してあるファイルを読込む
  63. ローカルに保存してあるJSONを読込む
  64. ローカルに保存してあるCSVを読込む
  65. クリックされた行に対して何かする
  66. clickした行にcss追加:他はcss削除3
  67. 親カテ残して子カテの表示・非表示
  68. formの入力項目のチェック
  69. 各データの詳細表示・非表示
  70. クリックしたカラムでソート3
  71. 特定の文字を装飾したい - 用途としては検索結果から検索した文字列を強調表示したいときなど。
  72. 特定の文字を装飾したい2 - カスタムバインディング - 用途としては検索結果から検索した文字列を強調表示したいときなど。カスタムバインディングを使う。
  73. 特定の文字を装飾したい2改 - カスタムバインディング - 用途としては検索結果から検索した文字列を強調表示したいときなど。カスタムバインディングを使う。
  74. 特定の文字を装飾したい3 - カスタムバインディング - 用途としては検索結果から検索した文字列を強調表示したいときなど。対象の文字列を入力できるように修正したもの。
  75. ページ内リンクでスクロールさせる - ページ内リンクをクリックしたときスクロールして移動させる

関連項目