私はフロントエンド開発の初心者で、プロジェクトに Ember.js を利用しようとしています。EmberConf 2015 で、Edward Faulkner による Liquid Fire に関するすばらしい講演を偶然見つけました。非常に簡単に適用できるように見えたので、試してみることにしました。
私のアプリは、ember-cli 0.2.0 経由で Ember と Ember-Data Canary を使用しています。
アプリの構造は次のようになります。
application.hbs
\users
\user
work.hbs
profile.hbs
...
user.hbs
これを担当するrouter.jsファイルの部分は次のとおりです。
this.resource('users', function (){
this.resource('users.user', { path: '/:user_id' }, function () {
this.route('work');
this.route('profile');
...
});
});
でアドオンをインストールした後、 user.hbsnpm install --save-dev liquid-fire
ファイルの {{outlet}} を {{liquid-outlet}} に置き換え、 transitions.jsファイルに簡単な遷移データを追加しました。
export default function () {
this.transition(
this.toRoute('users.user'),
this.use('fade')
);
}
しかし、ユーザー ページに移動するとすぐに、JavaScript エラーが発生します。
Uncaught TypeError: Cannot read property 'container' of undefined
これは、liquid-outlet.jsファイルの 15 行目から始まります。
var View = this.container.lookupFactory("view:liquid-outlet");
何が間違っているのかわかりません。{{liquid-outlet}} が間違った場所に置かれているなどの問題があるようですが、別の場所に移動しようとしましたが、うまくいきませんでした。{{liquid-outlet}} を含むテンプレートに移動するとすぐに、同じエラーが発生します。助けてください。
ありがとう、オレグ