Ember.js Rendering-Ausgang als modales Fenster

Question

Ich versuche, ein modales zu rendern. Dafür habe ich eine benutzerdefinierte Steckdose mit {{outlet modalOutlet}} Meine Anwendungsvorlage hat zwei Ausgänge, die Standard-Steckdose und das modalOutlet. Wenn die modale Vorlage jedoch in {{outlet modalOutlet}} gerendert wird, wird meine Standardeinstellung {{outlet}} leer.

Wie kann ich es ändern, so dass die Standard-{{}} Ausgang nicht ändert, so kann ich eigentlich {{outlet modalOutlet}} als modale Fenster machen, oder als Sidebar als Teil eines Layouts

I‘ Ich bin mir nicht sicher, ob dies an meinem Code liegt oder an der Methode, die ich vermisse. Die jsFiddle with my code is here.

// Router 
App.Router.map(function(){ 
    this.route('contributors'); 
    this.route('contributor', {path: '/contributors/:contributor_id'}); 
}); 


App.ContributorsRoute = Ember.Route.extend({ 
    model: function() { 
     return App.Contributor.all(); 
    }, 
}); 

App.ContributorRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('contributor', { 
      outlet: 'modalOutlet' 
     }); 
    } 
}); 

<script type="text/x-handlebars" data-template-name="application"> 
    <nav> 
     {{#linkTo "index"}}Home{{/linkTo}} 
     {{#linkTo "contributors"}}Contributors{{/linkTo}} 
    </nav> 
    <div style='padding:5px;margin:5px;border:1px dotted red;'> 
     Default Outlet 
     {{outlet}} 
    </div> 
    <div style='padding:5px;margin:5px;border:1px dotted blue;'>  
     modalOutlet 
     {{outlet modalOutlet}} 
    </div> 
</script> 

Answer 1

Sie müssen die contributors Vorlage als auch machen, da die Standard-Steckdose gelöscht wird, wenn Sie zu einer Geschwister Route übergehen.

Sie können dies vermeiden, aber wenn Sie nisten Ihre Routen wie folgt aus:

App.Router.map(function(){ 
    this.resource('contributors', function() { 
     this.route('show', {path: ':contributor_id'}); 
    }); 
}); 

... und den Rest Ihrer Anwendung passen Sie die neue Struktur angepasst. In diesem Fall müssen Sie angeben, wo die modalOutlet liegt mit der into Option (in diesem Fall: 'application')

Answer 2

Das Problem ist Ihre Routing-Struktur nicht verschachtelt ist, und wenn Sie nisten müssen Sie Ihre Routen Sie die Strecke angeben, die den modalen Auslass enthält.

Was passiert ist, dass Sie

Anwendung machen -> Teilnehmer

Ihrer Liste zu zeigen, aber wenn Sie auf einen Link klicken, werden Sie jetzt machen

Applikation -> Teilnehmer

an d Die Contributor Vorlage wurde entfernt.

Wenn Sie Nest Ihre Routen, wie folgt aus:

Anwendung -> Teilnehmer -> Contributor

Dann werden Sie noch die Contributors Vorlage haben die Liste zeigt.

updated JSFiddle

//Router 
App.Router.map(function(){ 
    this.resource('contributors', function() { 
     this.resource('contributor', {path: '/:contributor_id'}); 
    }); 
}); 

//Route 
App.ContributorRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('contributor', { 
      into: 'application', 
      outlet: 'modalOutlet' 
     }); 
    } 
});