読者です 読者をやめる 読者になる 読者になる

dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

follow us in feedly

[dojo]カスタムウィジェットを作成する

JavaScript dojo

公式ドキュメントのうち、こちらのページの内容を一通り学習してみる。

Creating a custom widget - The Dojo Toolkit

Dojoのバージョンは1.7.2。

Dojoチュートリアルが充実しているんだけど
最終的なソースコードをフルで書いてくれていないのがつらいところです。

今回、学習用に書いたコードは
Githubにあります。

dojo_samples/custom_widget_sample at master · zaki-yama/dojo_samples · GitHub

メモ

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.jsindex.htmlを配置すべきだったのに

.
├── AuthorWidget
│   ├── AuthorWidget.js
│   ├── css
│   │   └── AuthorWidget.css
│   ├── images
│   │   └── defaultAvatar.png
│   └── templates
│       └── AuthorWidget.html
└── index.html

こういう置き方をしてしまっていた。
main.jsが見つからないっていうメッセージの原因がわからず
苦戦しました。