公式ドキュメントのうち、こちらのページの内容を一通り学習してみる。
Creating a custom widget - Archived Tutorial - Dojo Toolkit
Dojoのバージョンは1.7.2。
Dojoはチュートリアルが充実しているんだけど
最終的なソースコードをフルで書いてくれていないのがつらいところです。
今回、学習用に書いたコードは
Githubにあります。
https://github.com/zaki-yama/dojo_samples/tree/master/custom_widget_sample
メモ
Step 3 Template
${attribute}とするとattribute内にHTMLが含まれていても自動でエスケープされる。
そうしたくない場合は${!attribute}というように変数名の先頭に!（エクスクラメーションマーク）をつける。dijit/_WidgetBaseを元として作成したクラスはbaseClassというプロパティを持つ
Step 4
画像のように、パスが必要な場合は
require.toUrl(path_to_file_name)を使うbaseClassに指定した名前はテンプレートの一番上の要素のclassになる
ハマったポイント
ディレクトリ構成を間違えていてこんな感じのエラーがずっと出てました。
GET http://localhost/dojoSamples/custom_widget_sample/AuthorWidget/main.js 404 (Not Found)
正しくは
. ├── custom │ ├── AuthorWidget │ │ ├── css │ │ │ └── AuthorWidget.css │ │ ├── images │ │ │ └── defaultAvatar.png │ │ └── templates │ │ └── AuthorWidget.html │ └── AuthorWidget.js └── index.html
こういう感じでAuthorWidgetディレクトリ、AuthorWidget.js、index.htmlを配置すべきだったのに
. ├── AuthorWidget │ ├── AuthorWidget.js │ ├── css │ │ └── AuthorWidget.css │ ├── images │ │ └── defaultAvatar.png │ └── templates │ └── AuthorWidget.html └── index.html
こういう置き方をしてしまっていた。
main.jsが見つからないっていうメッセージの原因がわからず
苦戦しました。
