問題タブ [durandal-navigation]

Durandal v2.1.0 ルーターを使用して、router.navigate();を使用してビュー間を移動する方法を理解しようとしています。関数。2 つのビュー間を行き来できましたが、そのたびにビューが再作成されます。これらのビューをキャッシュできるようにしたいので、ルーターがすでにアクティブ化されているビューにルーティングする場合、キャッシュから既存のビューを取得するだけです(監視可能な値などの現在のビューモデルの状態とともに...) .

シェルのルーターバインディングでcacheViews: trueオプションを使用することもできますが、これは機能していないようです。どんな助けでも大歓迎です。

settingsshell.jsで設定されたsplatルートがあります：

そして、views/settings/main.js私が子ルーターを作成したファイル内：

フォルダ構造は次のようになります。

私が直面している問題は次のとおりです。

別の親ルート ページから設定 (#settings) ページに移動しようとすると、コンソールにエラー メッセージが表示されます。

Route Not Found settings undefined

しかし、設定ページには、作成した子ルーターのすべてのリストが表示されたままです。

次に、and に移動しようとする#settings/usersと#settings/users/{id}、別の親ページから試しても問題もエラーも発生しません。

問題は、splat ルートが常に何かがハッシュの前にあると予想され#settings/users、子なしでは受け入れられない#settingsことだと思います ?

または、実装で何かを見逃しましたか?

ヘルプや提案をいただければ幸いです。
ありがとうございました！

目的: 子ルーターを利用してアプリの重要な機能領域ごとにルートを整理することの分離とカプセル化の利点が必要です。ただし、これらのルートを親ルーターのビューポート バインディングで処理および構成したいと考えています。すなわち

<div id="parentRouterViewport" data-bind="router: { cacheViews: true }"><div>

これまでのところ、（実験として）ルートを委任するために親ルーターにコールバックすることを含め、私が試みたすべてが失敗しました。これが可能かどうか疑問に思います。

簡潔にするために、ルーティングのミッション クリティカルなコード セクションを含めています。

shell.js

shell.html

index.js (子ルーティング モジュール)

これが機能する唯一の方法は、対応するindex.htmlビューにルーター ビューポート バインディングを配置することです。ただし、これは、私が設計しようとしている CSS レイアウトとページのルック アンド フィールに基づいて求めているものではありません。すべてをパネルとして表現し、ルートにヒットするたびに別のパネルに交換する必要があります。現在、このアプローチでは常に 2 つのパネルが開いています。私が言いたいことのより良い文脈については、下の写真を見てください。

私はデュランダル アプリケーションを使用router.mapUnknownRoutesしており、URL が既知のルートに対応していない場合に、ユーザー フレンドリーなエラー ページを表示するために使用しています。これは問題なく動作します。たとえば/foo、 に移動し、それがルートと一致しない場合、 で指定されたモジュールmapUnknownRoutesが正しく表示されます。

ただし、パラメーター化されたルートがあり、パラメーターがバックエンドの何にも一致しない場合、同じエラー ページを表示する方法が見つかりません。

たとえばpeople/:slug、対応するモジュールのactivateメソッドが次のように見えるルートがあるとします。

たとえば に移動すると/people/foo、結果は、dataService.load('foo')データを返すかエラーを返すかによって異なります。

• fooバックエンドに存在する場合は問題ありません。オブザーバブルが設定され、構成が続行されます。
• fooが存在しない場合、エラーがスローされます ( がないため) catch。これにより、未処理のエラーが発生し、ナビゲーションがキャンセルされ、ルーターが機能しなくなります。

falseから戻ることができcanActivate、ルーターを中断することなく、よりクリーンな方法でナビゲーションがキャンセルされることを知っています. ただし、これは私が望んでいるものではありません。何か問題が発生したことをユーザーに伝えるために、無効な URL が必要です。

{ redirect: 'not-found' }から戻るか、似たようなことができることを知っていcanActivateます。ただし、これは戻るボタンを壊すため、ひどいものです。リダイレクトが発生した後、ユーザーが戻るを押す/people/fooと、別のエラーが発生し、別のリダイレクトが に戻りnot-foundます。

私はいくつかの異なるアプローチを試しましたが、主catchに promise 定義への呼び出しを追加することを含みます。

• activate(またはcanActivate) は、最初から一致しなかったかのように、ルートが実際には無効であることをルーターに通知 できますか?
• URL を変更せずにルーターが別のモジュールを表示するように、 activate(または) は( ではなく) をcanActivate発行できますか?rewriteredirect
• 現在のモジュールの代わりに他のモジュールを直接指定できますcomposeか (そして現在のモジュールの構成をキャンセルできますか)?

catchまた、エラーを飲み込む空のブ​​ロックも試しました(ここにトーストを追加して、ユーザーに通知することができます。これは、何もないよりはましです)。ただし、ビューで期待されるオブザーバブルが設定されないため、これにより多くのバインディング エラーが発生します。ビュー全体をバインドでラップしてエラーを防止できる可能性がありますifが、これにより、エラー メッセージではなく空白のページが表示されます。または、データの取得に失敗する可能性のあるすべてのビューにエラー メッセージを表示する必要があります。いずれにせよ、これはビューの汚染であり、DRY ではありません。なぜなら、「見つかりません」というエラー メッセージは 1 回だけ表示する必要があるからです。

無効な URL (具体的には、ルートに一致するが無効なパラメーター値を含む URL) が「ページが見つかりません」というページを表示するようにしたいだけです。これは他の人も望んでいることではないでしょうか？これを達成する方法はありますか？

(別のビューの js ファイルから) ビューの html ファイルに移動したいのですが、そのビューで使用されるモデルを渡します。どうすればこれを行うことができますか。

通常、ダイアログで新しいビューを開くときにこれを行うことができます。この場合、モデル オブジェクトを作成し ( var model = require('viewmodels/modeljsfile)、このモデルのインスタンスを作成してプロパティにアクセスします ( var instance = new model(); instance.property1 = 'Test)。次に、このインスタンスをモーダルに渡します。

ビュー html をモーダルで開く代わりに、実際のビューにリダイレクトしたいと考えています。どうすればこれを行うことができますか?

DurandaljsのRouterを使用して、SPA のルーティングを制御しています。私のアプリケーションでは、すべてのルートが動的に作成されます。したがって、すべてのルートのマッピングにはmapUnknownRoutesのみを使用します。私が抱えている問題は、ユーザーが同じページ内の異なるハッシュ間を移動した場合、「戻る」をクリックすると現在のページがアンロードされることです。これは私が防ぎたいことです。私はguardRouteを使用してこれを行うことを考え、ナビゲーションが同じページに残っている場合は「false」を返しますが、「guardRoute」は「mapUnknownRoutes」の後にのみ実行されるため、現在のページのアンロードを妨げません.

助言がありますか？

ありがとう ！

エリオール

ルート パラメーターを activate() パラメーターに直接マッピングするのは便利ですが、パラメーター化されたモジュールを再利用する際に問題が生じます。

例のようなルートを取る

ビューモデルはで呼び出されます

現在、 requestDetail モジュールは、ナビゲーションのさまざまな位置とレベルで再利用できます。

親ルーター

子ルーター

requestDetail vm が呼び出される効果があります

これは明らかに問題です。渡されたパラメーターを子ルーターからのパラメーターに制限する方法はありますか (問題を解決します)。

私が取り組んでいるデュランダル アプリケーションには、ユーザーを子ビューに移動させるタブが上部にあるページがあります。これらのタブは完全に機能し、次のように構成されています。

また、次のように、タブがクリックされるたびに実行されるナビゲーション関数もあります。

ページの URL が期待どおりに更新されます。デフォルトの管理子ビュー ( .../#admin) から [設定] タブに移動すると、URL が に更新されます.../#admin/settings。ただし、問題は、replace: true指定されているにもかかわらず、ビューの変更がブラウザーの履歴に保存されていないように見えることです。

ページで新しいブラウザー タブを開いてその#adminページに移動すると#admin/settings、ブラウザーは、これより前の唯一の履歴エントリが新しいタブを開いたものであると認識しているように見えます。

その後、#adminセクションから完全に移動すると、最後に使用していたタブがブラウザーの履歴に記憶されているように見えますが (この場合、使用していた [設定] タブ)、以前にアクセスしたメイン#adminページのエントリはありません。

に行ってから#adminに#admin/settings戻ると、#admin代わりにメインの管理ページへの参照のみが履歴に表示され、設定ページについては言及されません。

子ビューが変更されるたびに履歴が更新されないように、私が見逃したことを誰かが知っていますか?