Wie öffne ich eine Route in einem modalen Dialog in ember.js?

Question

Wir müssen einen modalen Dialog öffnen, der eine Route oder eine Komponente enthält. Wir suchen nach einigen modalen Komponenten und sahen ember-bootstrap Modal ist nützlich.

So

1. Wie können wir jede Route als modaler Dialog zu öffnen? (Wenn die übergeordnete Route entscheidet, dass eine Route in einem Modal geöffnet ist, sollte die untergeordnete Route in modal geöffnet sein.)
2. Können wir einen Service erstellen, um einen modalen Dialog zu öffnen? Wie zum Beispiel: ModalDialogService.popup(title, bodyComponent, commitHandler, cancelHandler); oder ModalDialogService.popup(title, routeName, commitHandler, cancelHandler); Und wie können wir dies tun, ohne die Data Down Action Up Prinzip zu verletzen?
3. Gibt es ein Handbuch, Dokument, Tutorial oder NPM-Paket für die Implementierung von Modals in ember.js?

AKTUALISIERT:

Was ich brauche, ist in einem modalen einen der aktuellen Routen zu öffnen. Zum Beispiel in einer Hierarchie vorgegebenen Route:

-module1 
|-module1.query 
|-module1.add 
|-module1.update 
|-module1.delete 

Derzeit hat module1.query Übergänge zu anderen. Aber ich möchte den Modulentwicklern eine Option geben, um die Routen hinzufügen, aktualisieren, löschen in einem Modal zu öffnen. So dass query Route seinen Zustand nicht verliert, wenn ein hinzufügen Operation beendet.

Auch haben wir einige Dienste von Komponenten verwendet. Unter bestimmten Bedingungen müssen Dienste ein Modal mit einer Komponente anzeigen.

Answer 1

Sie sollten in der Lage sein, einen Service und eine Komponente ähnlich der folgenden zu verwenden, um zu erreichen, was Sie wollen.

Werfen Sie einen Blick auf den twiddle für eine Demo, wie dies genau funktioniert, und den Code zum schnellen Nachschlagen

Vorlage Ihrer Route so etwas wie dies aussehen könnte.

// templates/hasmodal.hbs 

{{#bs-modal}} 
    Modal Content 
{{/bs-modal}} 

Ihr Weg Haken, injiziert mit Service

// routes/hasmodal.js 

export default Ember.Route.extend({ 

    modalNavigation: Ember.inject.service(), 

    activate(){ 
    console.log('openingModal') 
    this.get('modalNavigation').openModal() 
    }, 

    deactivate(){ 
    console.log('closingModal') 
    this.get('modalNavigation').openModal() 
    }, 

    actions: { 
    onClose(){ 
     console.log('we want to close route') 
    } 
    } 
}) 

Ihre bs-modal oder relevante Komponente

//components/bs-modal.js 

export default Ember.Component.extend({ 

    modalNavigation: Ember.inject.service(), 

    isOpen: Ember.computed.alias('modalNavigation.modalOpen'), 

    classNameBindings: ['isOpen:modalDialog:notOpen'], 

    actions: { 
    close(){ 
     this.get('modalNavigation').closeModal() 
    } 
    } 
}) 

Die bs-modal Komponentenvorlage

// templates/components/bs-modal 

<div> 
    {{yield}} 
</div> 
<button class='close' {{action 'close'}}>Close Me</button> 

Ihre Modal Dienst zur Verwaltung des Status

// services/modal-navigation.js 

export default Ember.Service.extend({ 
    modalOpen: false, 
    openModal(){ 
    this.set('modalOpen',true) 
    }, 
    closeModal(){ 
    this.set('modalOpen',false) 
    } 
}) 

UPDATE:

twiddle aktualisiert

Es besteht im Wesentlichen Nester Routen, die eine modale unterhalb einer Route enthalten Sie den Zustand bewahren wollen und hinter dem modalen zeigen.

// router.js [truncated] 
Router.map(function() { 
    this.route('module1',function(){ 
    this.route('query',function(){ 
     this.route('add') 
     this.route('update', { path: '/update/:item_id' }) 
     this.route('delete', { path: '/delete/:item_id' }) 
    }) 
    }) 

// templates/modules1/query.hbs 
Queried List {{link-to 'add item' 'module1.query.add'}}<br/> 
<ul> 
    {{#each model as |item|}} 
    <li> 
     {{item.id}}-{{item.title}} 
     {{link-to 'u' 'module1.query.update' item}} 
     {{link-to 'd' 'module1.query.delete' item}} 
    </li> 
    {{/each}} 
</ul> 
{{outlet}} 

// templates/module1/query/add.hbs 
{{#modal-component isOpen=true onClose=(action "routeClosed")}} 
    <div> 
    Title:{{input value=model.title}} 
    </div> 
    <button {{action 'save'}}>Save</button> 
{{/modal-component}} 

Wo alle anderen Unterkomponenten die gleiche modal Wrapper Prinzip