Question

我们需要打开一个包含路径或组件的模态对话框。我们正在寻找一些模态组件，并且看到ember-bootstrap的模态是有用的。

所以，

我们如何打开任何路径作为模态对话框？（如果父路线决定在模态中打开路线，则子路线应以模态打开。）
我们可以创建一个服务，弹出一个模态对话框吗？例如：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路由不会丢失其状态。

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

Answer 1

您应该能够使用与下面类似的服务和组件来实现您的目标。

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

<强>更新

更新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}}

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

如何在ember.js中的模态对话框中打开路径？

1 个答案: