aurelia mehrere viewPorts auf der gleichen Komponente

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.

Quelle

2016-06-15 Juri Krainjukov

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

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

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

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)

Quelle

2016-06-15 14:28:06 Charleh

aurelia mehrere viewPorts auf der gleichen Komponente

Antwort

Verwandte Themen