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

Question

我們需要打開一個包含路徑或組件的模式對話框。 我們正在尋找一些模態組件，並且看到ember-bootstrap的模態很有用。

所以，

1. 我們如何打開任何路徑作為模式對話框？ （如果父路徑決定要以模式打開的路徑，則子路徑應以模式打開。）
2. 我們可以創建服務來彈出模式對話框嗎？ 如： ModalDialogService.popup(title, bodyComponent, commitHandler, cancelHandler); 或ModalDialogService.popup(title, routeName, commitHandler, cancelHandler); 在不違反Data Down Action Up原則的情況下如何做到這一點？
3. 是否有用於在ember.js中實現模態的任何指南，文檔，教程或npm軟件包？

更新：

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

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

當前， module1.query已過渡到其他模塊。 但是我想給模塊開發人員一個選項，以模式方式打開任何添加，更新，刪除路由。 這樣，當添加操作完成時，該query路由不會丟失其狀態。

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

Answer 1

您應該能夠使用與以下服務和組件類似的服務和組件來實現所需的功能。

看看旋轉的方法 ，演示一下它是如何工作的，以及下面的代碼可供快速參考

您的路線模板可能看起來像這樣。

// 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-modal或相關組件

//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-modal組件模板

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

更新：

更新的旋轉

它基本上將包含模態的路由嵌套在要保留其狀態並在模態后面顯示的路由下方。

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

其他所有子組件都遵循相同的模式包裝原則