如何在ember.js的模態對話框中打開路線？

我們需要打開一個包含路徑或組件的模態對話框。我們正在尋找一些模態組件，並且看到ember-bootstrap的模態是有用的。如何在ember.js的模態對話框中打開路線？

所以，

我們如何可以打開一個模式對話框的任何路線？（如果父母路線決定以模式打開的路線，則應以模態方式打開孩子路線。）
我們可以創建服務，彈出模態對話框嗎？如：ModalDialogService.popup(title, bodyComponent, commitHandler, cancelHandler);或ModalDialogService.popup(title, routeName, commitHandler, cancelHandler);如何在不違反Data Down Action Up原理的情況下做到這一點？
是否有任何指導，文檔，教程或NPM包在ember.js中實現模態？

更新：

我需要的是在模式打開任何當前的路線。例如，在給定的路線層次結構中：

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

當前module1.query已轉換爲其他。但是我想給模塊開發者一個選項，打開添加，更新，刪除路徑中的任意一個模態。這樣query路由不會失去它的狀態，當一個加上操作完成。

另外我們還有一些組件使用的服務。在某些情況下，服務需要顯示具有組件的模式。

來源

2016-04-26 ykaragol

@ykaragol嗨，你還需要在這裏，我可以幫些什麼呢？ – TameBadger

@TameBadger我已經更新了這個問題。 – ykaragol

嗯有趣，我只是想分開你想要更多一點。分類時是否想要同時打開兩條路線？在這種情況下，module1.query目前是路由，並且您想要在模塊中打開module.add？我想我有一個解決方案，如果是這樣的話.. – TameBadger

您應該可以使用類似下面的服務和組件來實現您想要的功能。

看一看在twiddle對於如何工作完全是一個演示，和下面的代碼爲快速參考

你的路徑模板可以是這個樣子。

// templates/hasmodal.hbs 

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

您的路線掛鉤，與服務注入

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

您的BS-模式或相關組件

//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() 
    } 
    } 
})

在BS模式的組件模板

// templates/components/bs-modal 

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

你莫代爾服務來管理狀態

// services/modal-navigation.js 

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

UPDATE：

更新twiddle

它基本上巢包含要保留的狀態和顯示模式背後的路線下方的模式途徑。

// 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}}

在所有其他子部件遵循相同的模式包裝原理

來源

2016-04-27 00:01:32 TameBadger

謝謝！這就對了。 – ykaragol

差不多一年後，這個答案仍然挽救生命！ –

如何在ember.js的模態對話框中打開路線？

回答

相關問題