プログラミング/JavaScript/Knockout.js の履歴(No.7)

Knockout.js†

ブラウザ上の DOM を JavaScript で操作するために、 JavaScript 上の ViewModel オブジェクト と DOM とを リンクさせ、ViewModel の変更が自動的に DOM に 反映されるようになる超お手軽なライブラリ

非常に使いやすいテンプレート機能や、 Computed Observable によるデータ依存関係の追跡も、 地味に重要な機能

と理解しました。

最近は prototype.js ははやらないので、

• html5 : 最新の html 標準
• css3 : 最新の css 標準
• jQuery : 汎用ライブラリ 主に DOM 操作
• Knockout.js : View-ViewModel 関係を構築するためのフレームワーク
• knockout.validation.js : Knockout.js 上での Validation ライブラリ
• Underscore.js : 汎用ライブラリ
• reset.css : ブラウザ依存スタイルのリセット用コード
• html5shiv.js, css3-mediaqueries.js : 古い IE 対策

あたりを使うのが定番なのでしょうか？

情報源†

• Knockout.js 日本語ドキュメント
  http://kojs.sukobuto.com/tips/contactsEditor
• Demo & Tips - Knockout.js 日本語ドキュメント
  http://kojs.sukobuto.com/tips/
• HTML5のテンプレートを用意する
  http://www.sichoru.net/2013/08/522

試しに学会アブストラクトのＷｅｂ投稿フォームを作ってみる†

knockoutjs + knockout-validation で、 jsfiddle の使い方も学びながらちょっとずつやってみてます。

http://jsfiddle.net/e2yFs/2/embedded/result,js,resources,html,css/

現状、とりあえず動くことは動きますが、下記の knockout.validation のバグのために Submit を押すと Validation にものすごく時間がかかります。 (2014-05-13 追記：その後のアップデートのため、現状は動かなくなっています)

Issue #354 で提案した改善を施した物がこちらで、Submit も問題なく動きます。 (2014-05-13 追記：こちらは動くと思います)

http://jsfiddle.net/e2yFs/5/embedded/result,js,resources,html,css/

• Submit 時に確認画面を出す
• データを保存せずページ遷移しようとした時に確認画面を出す
• cookie に？データを一時保存する ← 日付入りでｎ個まで
• 一時保存データの一覧を出す
• 一時保存データの load, save(overwrite), delete

とか、試したい。

knockout-validation の現状†

(2014-05-13 追記)

どうも、knockout-validation は開発がうまく行っていないみたいですかね。

2014-05-13 現在、最新リリースは２年前で、オープン issue が溜まりまくっています。

かなり残念ですが、今後も長く使っていくライブラリとしては採用しづらいのかもしれません。

気付いたこと†

LANG:js
// これはダメ

Child = function(parent) {
  this.parent = parent;
};

Parent = function() {
  this.child = new Child(this);
};

LANG:js
// これならＯＫ

Child = function(parent) {
  this.parent = function(){ return parent; };
};

Parent = function() {
  this.child = new Child(this);
};

observable.valueHasMutated();

質問・コメント†