2015-06-17 3 views
20

Ziel: ich die Segregation und Verkapselung Vorteile wollen Kind Router der Nutzung Routen durch signifikantes Merkmal Bereiche der App zu organisieren. Ich möchte jedoch, dass diese Routen von der übergeordneten Router-Viewport-Bindung behandelt und zusammengesetzt werden. d.hConfigure Kind Router zu komponieren Module in übergeordneten Router Ansichtsfenster html Bindung

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

Bisher alles, was ich habe versucht, einschließlich Anrufe zurück zum Vater-Router machen die Strecke zu delegieren (als Experiment) gescheitert. Ich frage mich, ob das überhaupt möglich ist.

Der Kürze halber schließe ich nur die missionskritischen Codeabschnitte für das Routing ein.

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 (child Routing-Modul)

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 
    }; 
}); 

Der einzige Weg, dies funktioniert, ist, wenn ich eine Router-Viewport-Bindung in meiner entsprechenden index.html Ansicht platzieren. Dies ist jedoch nicht das, was ich bin basierend auf dem CSS-Layout und Seite Aussehen und Gefühl, das ich versuche zu entwerfen. Wenn eine Route getroffen wird, sollte alles als ein Panel dargestellt und für ein anderes Panel ausgetauscht werden. Derzeit werden bei diesem Ansatz zwei Panels ständig geöffnet sein. Sehen Sie sich das Foto unten an, um einen besseren Überblick darüber zu erhalten, was ich meine.

Photo of the CSS layout issue described above

+0

Versuchen Sie, etwas ähnliches zu erreichen [Durandal Beispiel] (http://dfiddle.github.io/dFiddle-2.0/#view-composition)? –

Antwort

3

In unserem Team haben wir unseren eigenen „Kind-Router“ mit Knockout Variablen erstellt Ein-/Ausblenden des auf dem Registerkarte Schaltfläche klicken basiert Subviews. Ein Nachteil dabei ist, dass Sie Ihre activate, disable, compositionComplete usw. von der Haupt-/Elternansicht aufrufen müssen, damit die SubView funktioniert. Es gibt noch einige andere Probleme, aber ich dachte, ich würde dir das als eine Option geben oder andere, die diese Frage später sehen.

Verwandte Themen