ember-rails でコンポーネントをサブフォルダに配置する

Ember.js に限らずコンポーネントは増えてくるとサブフォルダに分割して管理したくなるよね。ということでそのあたりの記事。

これも、ES6 Module 対応版と旧来版の両方を書く。 ES6 Module 対応版は何も考えることがないので、この記事は旧来版のためにあるようなものだけど。

ES6 Module 対応版の場合

上に書いたようにこれは https://github.com/mugijiru/ember-rails-todo-app/pull/14 に実装してあるけどとっても簡単

components の下に適当なフォルダを掘ってその中に移動するだけ。

templates/components の下に適当なフォルダを掘ってその中に移動するだけ。

template, component をそれぞれ

と配置した場合は {{hoge/fuga}} と書いて呼び出せばいい感じに動く。以上。

こういう感じで動くように ember-resolver@0.1.21 が作られてるっぽいのでとても楽。

Ember.js のドキュメントなどを見ている感じだと多分もっと新しいバージョンでも同じ感じで動くっぽい。というわけで Ember.js@3 にしても多分動きそうなので安心感がある。

これは GlobalsResolver の挙動のおかげでちょっと大変。

今回やりたかったことは、テンプレートとコンポーネントをサブフォルダに移動して扱えるようにすることなので、その実現方法を書いておく

{{hoge/fuga}} と呼び出した際に GlobalsResolver でどう解釈されるとかというと前の記事にも書いたように Hoge という名前空間の FugaComponent を探しに行くようになってるというのが前提。

GlobalsRegister の解釈に合わせて FugaCompnent を Hoge 名前空間に所属させればいいので

Hoge.FugaComponent = Ember.Compnent.extend()

という形で定義しておけばいい。

旧来方式だとファイル自体は components の中にあればファイル名も位置も何でもいいはずなので人間がわかりやすいように components/hoge/fuga.js.es6 として配置したら良い。

また、事前に Hoge という名前空間は必要なので components/hoge.js.es6 とファイルで

window.Hoge = Ember.Namespace.create()

としておく。

前回の共通ライブラリ切り出しと大体似たお話ですね。

これは難しいことは何もなくて templates/components/<名前空間>/<コンポーネント名>.hbs みたいに配置したら良い。

つまり Hoge.FugaComponent の場合は templates/components/hoge/fuga.hbs と置けばいい。

試してないけど、 GlobalsRegister の実装を見ている感じだと、多分

window.Hoge = Ember.Namesupace.create()

Hoge.Fuga = Ember.Namesupace.create()

Hoge.Fuga.PiyoComponent = Ember.Component.extend()

にみたいな感じに名前空間をネストさせれば大丈夫そう。

前回の共通ライブラリ切り出しよりは簡単でしたね。

ES6 Module 対応版では直感的にやるだけで終わるし、旧来版でも共通ライブラリと大体やること一緒というか、それよりも手順が少ないので、サブフォルダへの移動を先にやった方が良かったかも。

あと、今回も両パターンでやってるので、 ES6 Module 移行前にこちらを実施しても簡単な修正で対応できることがわかりました。やったね。