如何在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}}

其他所有子组件都遵循相同的模式包装原则