1

ホットタオルベースの (MVC4 SPA) プロジェクトで、Durandal を使用して子ルーターを適切に作成する方法を理解できず、一日中苦労しました。これは私が現時点で持っているものです：

shell.js

var routes = [
    { route: '', moduleId: 'home', title: 'Home', nav: 1 },
    { route: 'inventory/index', moduleId: 'inventory/inventory', title: 'Inventory', nav: 2 }];
return router.makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention
    .map(routes)            // Map the routes
    .buildNavigationModel() // Finds all nav routes and readies them
    .activate();            // Activate the router

在庫.js

define(['services/logger', 'plugins/router'], function (logger, router) {
    var title = 'Details';
    var childRouter = router.createChildRouter()
      .makeRelative({
         moduleId: 'viewmodels/inventory',
         fromParent: true
      }).map([
            { route: '', moduleId: 'inventory', title: 'Inventory', nav: 3 },
            { route: 'items', moduleId: 'items', title: 'Items', nav: 4 }])
        .buildNavigationModel();
    var vm = {
       router: childRouter,
       activate: activate,
       title: title
    };

    return vm;

    //#region Internal Methods
    function activate() {
       logger.log(title + ' View Activated', null, title, true);
    }
    //#endregion
});

私が現在抱えている問題：

  1. インベントリ ビューをクリックすると 2 回アクティブになります
  2. 空の 3D 角丸四角形が右上に表示されますが、それ以上のナビゲーション オプションは表示されません...それが消えなかったプログレス バーなのか、それとも失敗したナビゲーション要素なのかはわかりません。

私のプロジェクトファイルは次のように編成されています：

プロジェクトファイルのツリー構造

4

1 に答える 1

1

私の主な問題は、ビューまたはビューモデルに子ナビゲーションを実装せずに子ナビゲーション メニューが表示されることを期待していたことです。子ナビゲーションが既存のナビゲーションに組み込まれていないことを知りませんでした。ここに私がしなければならなかった変更があります。

子ナビゲーション メニューを選択して表示するdata-bindon要素を追加して、inventory.html ファイルを子ナビゲーション コンテナーとして機能するように変更します。また、最下位のナビゲーション レベルでリーフ ノード (ページ コンテンツ) を取得するonを持つ要素を含めます。router.navigationModeldata-bindrouter

<section>
    <header>
    <h2 class="page-title" data-bind="text: title"></h2>
    <nav class="pull-left">
        <ul class="nav nav-pills nav-stacked" data-bind="foreach: router.navigationModel()">
            <li><a data-bind="    css: { active: isActive }, attr: { href: hash }, text: title" 
            href="#"></a></li>
        </ul>
    </nav>
    </header>
    <section id="inventoryPane" data-bind="router: { transition: 'entrance', cacheViews: true }"></section>
</section>

注ここでは、完全にナビゲートされたビューに実際には 3 つのモジュールが関係しています。shell.js はトップ レベルのナビゲーションを持つルートであり、inventory.js (たとえば) は子ナビゲーション ボタンを持つ別のコンテナーになり、最後に items.js (たとえば) は inventory.js コンテナーに表示されるコンテンツを表します。

次に、inventory.js をコンテナーとして機能するように更新し、makeRelative への呼び出しでモジュールの完全修飾パスを指定する必要がありました (多くの絶望的な実験の 1 つとして、質問にコードを投稿した後に削除しました)。moduleId を正しく取得しないと、存在しないオブジェクトのルーター プロパティにアクセスしようとしたときに致命的なエラーが発生し、IE を実行している場合、デバッガーによって表示されるメッセージはまったく役に立ちません。

define(['services/logger', 'plugins/router'], function (logger, router) {
   var title = 'Inventory';
   var childRouter = router.createChildRouter()
   .makeRelative({
      moduleId: 'viewmodels/inventory',
      fromParent: true
   }).map([
         { route: 'items', moduleId: 'items', title: 'Items', nav: 3 }])
      .buildNavigationModel();
   var vm = {
      router: childRouter,
      activate: activate,
      title: title
   };

   return vm;

   //#region Internal Methods
   function activate() {
      logger.log(title + ' View Activated', null, title, true);
   }
   //#endregion
});

次に、「*inventory」ルートが見つからないというエラーを回避するために、ルート レベル ルーティングのハッシュを更新する必要があったようです。スプラットルートが自動的にうまく処理されない理由がわかりません。どういうわけか、ノックアウト サンプルはこの問題を回避しましたが、ハッシュをオーバーライドせずにはいられませんでした。

var routes = [
    { route: '', moduleId: 'home', title: 'Home', nav: 1 },
    { route: 'inventory*inventory', moduleId: 'inventory', title: 'Inventory', hash:"#inventory", nav: 2 }];

最後に、ツリーを再構築して、インベントリ ファイルを 1 レベル上に移動する必要がありました。

プロジェクトツリー構造

于 2013-11-13T23:27:03.847 に答える