Configurare router bambino a comporre moduli in router genitore finestra html vincolante

Question

Obiettivo: Voglio la segregazione e di incapsulamento vantaggi di utilizzare i router bambino di organizzare percorsi da significative aree di funzionalità della app. Tuttavia, voglio che queste rotte siano gestite e composte dal binding della viewport del router parent. cioè

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

Finora, tutto quello che ho provato, per effettuare chiamate di nuovo al router genitore di delegare il percorso (come esperimento) hanno fallito. Mi chiedo se questo sia persino possibile.

Per brevità, sto solo includendo le sezioni del codice critico della missione per il routing.

shell.js

return { 
     router: router, 
     activate: function() { 
      return router.map([ 
        { route: 'App*splat', moduleId: 'app/home/viewmodels/index', title: 'Home', nav: true } 
       ]).buildNavigationModel() 
       .mapUnknownRoutes('app/home/viewmodels/error') 
       .activate(); 
     } 
    }; 

shell.html

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

index.js (modulo di routing bambino)

var childRouter = router.createChildRouter() 
     .makeRelative({ 
      moduleId: 'app/home/viewmodels', 
      fromParent: true 
     }).map([ 
      { route: 'EligibiltySearch', moduleId: 'eligibilitySearch', title: 'Eligibility Search', nav: true } 
     ]).buildNavigationModel(); 

    return { 
     router: childRouter 
    }; 
}); 

L'unico modo in cui funziona è se inserisco un binding del viewport del router nella mia vista index.html corrispondente. Tuttavia, questo non è quello che sto dopo in base al layout css e al look and feel della pagina che sto provando a progettare. Tutto dovrebbe essere rappresentato come un pannello e scambiato per un pannello diverso ogni volta che viene colpito un percorso. Attualmente, questo approccio avrà due pannelli costantemente aperti. Dai un'occhiata alla foto qui sotto per un contesto migliore su cosa intendo.

Answer 1

Nella nostra squadra, abbiamo creato le nostre "router bambino" Uso delle variabili Knockout per mostrare/nascondere i subviews basate su tasto tab click. Un avvertimento in questo senso è che dovrai chiamare l'attivazione, la disattivazione, la composizione completa, ecc. Dalla vista principale/genitore per far funzionare la subView. Ci sono altri trucchi, ma ho pensato di darti questo come opzione o altri che vedono questa domanda più tardi.