2016-06-15 10 views
1

Ist es möglich, ViewPorts mit der gleichen Komponente zu verwenden, ohne dass es zweimal instanziiert wird. Z.B.aurelia mehrere viewPorts auf der gleichen Komponente

config.map([ 
     { 
      route: 'route1', 
      name: 'route1', 
      viewPorts: { 
       default: {moduleId: './route1-module'}, 
       heading: {moduleId: './route1-module', view: './route1-module-heading.html'} 
      }, 
      nav: true, 
      title: 'Route1' 

     }]); 

route1-Modul wird zweimal instanziiert worden und befestigt. Ich muss es vermeiden.

+0

Was machen Sie es zu tun erwarten? Sie haben zwei Ansichtsfenster ... Wie teilen Sie dieselbe Komponente zwischen zwei Ansichtsfenstern? Möchten Sie nur die gleiche VM und die gleiche Ansicht unterstützen? – Charleh

+0

Ich möchte eine Backing-Komponente mit zwei Ansichten, die ich an verschiedenen Teilen in der Elternansicht anhängen kann. –

+0

Also im Wesentlichen möchten Sie Platzhalter, wo zwei Bits des Inhalts gerendert werden, aber Sie wollen ein einzelnes Viewmodel, um es zu unterstützen? So etwas wie MVC-Teilseiten oder ASP.NET-Masterseiten? – Charleh

Antwort

3

Es klingt wie Sie die Layout-Funktion verwenden möchten, die in einer späteren Version vorhanden sein wird (ich bin nicht sicher wann, aber die PR wurde kürzlich zusammengeführt).

Die PR ist hier: https://github.com/aurelia/templating-router/pull/25

Im Wesentlichen Sie es gibt eine Chance, einen Blick/Viewmodel Paar (a Layout) angeben, die anstelle des ursprünglichen Moduls, wenn geroutet sitzen. Stattdessen wird der ursprüngliche Inhalt mit slots in das Layout projiziert.

Beispiel:

Route-config

config.map([ 
    { layoutView: "layout.html", moduleId: 'page1' } 
]); 

page1.html

<template> 
    <div slot="slot1">some content</div> 
    <div slot="slot2">some other content</div> 
</template> 

layout.html

<template> 
    <div class="some-fancy-container"> 
     <p>This is slot 2</p> 
     <!-- slot2 content will be projected here --> 
     <slot name="slot2">some fallback content</slot> 
    </div> 
    <div class="sidebar"> 
     <p>This is slot 1</p> 
     <!-- slot1 content will be projected here --> 
     <slot name="slot1">some fallback content</slot> 
    </div> 
</template> 

resultierende HTML-Ausgabe:

<template> 
    <div class="some-fancy-container"> 
     <p>This is slot 2</p> 
     some other content 
    </div> 
    <div class="sidebar"> 
     <p>This is slot 1</p> 
     some content 
    </div> 
</template> 

Dies ist vergleichbar mit MVC partials oder ASP.NET Masterseiten und ermöglicht es Ihnen, ein alternatives Layout für bestimmte Seiten angeben (ohne Routen Kind zu benötigen).

Es ist sehr verschieden von Ansichtsfenstern (es funktioniert auch mit Ansichtsfenstern, dass Sie auch ein Layout für ein Ansichtsfenster angeben)