Ember.js Rendering outlet come finestra modale

Question

Sto tentando di eseguire il rendering di un modale. Per questo ho creato una presa personalizzata usando {{outlet modalOutlet}} Il mio modello di applicazione ha due uscite, la presa predefinita e il modalOutlet. Tuttavia, quando il modello modale viene reso in {{outlet modalOutlet}}, il mio valore predefinito {{outlet}} diventa vuoto.

Come posso cambiare, in modo che il default {{uscita}} non cambia, così mi può effettivamente rendere {{outlet modalOutlet}} come finestra modale, o come una barra laterale come parte di un layout

I' Non sono sicuro se questo è dovuto al mio codice, o qualcosa del metodo renderTemplate() che mi manca. 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

devi rendere il modello contributors così, dal momento che l'uscita di default viene cancellato quando si transizione verso un percorso di pari livello.

È possibile evitare questo, tuttavia, se si nidificano i percorsi come questo:

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

... e regolare il resto della vostra applicazione in modo che corrisponda alla nuova struttura. In questo caso, è necessario specificare il posto modalOutlet con l'opzione into (in questo caso: 'application')

Answer 2

Il problema è la struttura di routing non è annidato, e una volta che nidificano i percorsi sarà necessario specificare il percorso che contiene l'uscita modale.

Quello che sta accadendo è il rendering

Applicazione -> Contribuenti

per visualizzare l'elenco, ma quando si fa clic su un link si sta ora rendendo

Applicazione -> Collaboratore

an d il modello Contributor è stato rimosso.

Se voi nido tuoi percorsi, come questo:

Applicazione -> Contribuenti -> Contribuente

Allora si avrà ancora il modello Contributors mostra la lista.

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