異なるページフォーマットのaureliaページ

Question

Aurelia SPAテンプレートでは、すべてのページがapp.html内にあり、上部に同じナビゲーションバーを使用することが前提です。しかし、私はnav-barを一番上に置くことを望まない多くのページを持ち、実際にはapp.htmlをまったく使用しません。私はmain.jsを見ていて、ブートストラップ（）にフックして特定のページのaurelia.setRoot（）を変更することができましたが、私はmain.jsファイルをmuckingし始めます。それは本当に面倒でメンテナンスの頭痛になるまでそれほど長くはありません。私は実際に、いくつかのページで独自のフォーマットを使用し、app.htmlフォーマットを無視して狂った設定を行わないようにしたいだけです。

私の初期の考えは多分app.htmlは空のファイルにして、すべてのページがnav-barを望んで、それを個々のページに含めるかどうかを決めるべきです。しかし今、私は多くのページにコードを複製しています。標準のページレイアウトが変更された場合は、すべての個々のページを変更する必要があります。彼のことを知る最善の方法は不明です。助言がありますか？

Answer 1

あなたが言ったように、set rootを使うのは悪い考えです。あなたが言ったのと同様に、app.htmlにはルータビュータグだけを含めることができます。同じようなページレイアウトを共有したいアプリケーションのさまざまな部分は、別々のルートの下でグレープされます。これらのルートのそれぞれは、ビューに異なるスタイルを持つ別のルータを指します。

ちょうど、それがスタイルを持つ空のapp.htmlと考えてください（たとえば、異なるナビゲーションバー、ページレイアウト等）

Answer 2

私は実際にギルバートの答えに同意しません。 .setRootを使用することがベストプラクティスです。ルートは親ビュー/ viewModelペアに過ぎず、しばしば異なる親を持つことになります。これは基本的に、空のアプリケーションビュー/ viewModelを作成して何もしない新しい親を作成しているときに実行していることです。しかし、不必要な未使用レイヤーを追加することは、余分な複雑さに過ぎません。

これは、ログインページの1つです。ログインページは通常のアプリページとはまったく異なります。ログインプロンプト、ナビゲーションバーなどはありません。したがって、「ログイン」アプリルートと「アプリ」アプリルートを作り、それらの間を行き来します。私はこれを行う方法を示すSentryというテンプレートを構築しました。

Sentry in action

Sentry on GitHub