如何在 ember.js 中的模式对话框中打开路由

How to open a route in a modal dialog in ember.js?

本文关键字：对话框 路由 模式 ember js      更新时间：2023-09-26

我们需要打开一个包含路由或组件的模态对话框。我们正在寻找一些模态组件，锯 ember-bootstrap 的模态很有用。

所以

  1. 我们如何打开任何路线作为模态对话框？（如果父路由决定在模态中打开路由，则子路由应在模态中打开。
  2. 我们可以创建一个服务来弹出一个模式对话框吗？例如：ModalDialogService.popup(title, bodyComponent, commitHandler, cancelHandler);或ModalDialogService.popup(title, routeName, commitHandler, cancelHandler);我们如何在不违反数据向下操作向上原则的情况下做到这一点？
  3. 是否有任何指南、文档、教程或 npm 包用于在 ember.js 中实现模态？

更新：

我需要的是在一个模态中打开任何当前路线。例如，在给定的路由层次结构中：

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

目前，module1.query已过渡到其他人。但是我想为模块开发人员提供一个选项，以打开模态中的任何添加，更新，删除路由。这样query添加操作完成时，路由不会丢失其状态。

此外，我们还有一些组件使用的服务。在某些情况下，服务需要显示具有组件的模式。

您应该能够使用类似于下面的服务和组件来实现您想要的。

查看 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)
  }
})

更新：

更新的暮动

它基本上将包含模态的路由嵌套在要保留状态并显示在模态后面的路由下方。

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

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

相关文章：