在3.x的Ember.js应用程序中,我想向用户显示现有屏幕上的更新表单重载。
现有的屏幕将位于路径‘\ screen’上,而更新表单将位于‘\screen\ update \carrots’上。如果更新是传统的表单,就不会有问题,但是如何在现有表单上显示覆盖的表单呢?这个有没有附加功能?
我正在使用bootstrap来设计ui样式,所以可以使用bootstrap模态,但我不确定如何将其应用到模板中?
我看到了许多插件,但它们似乎都是针对当前路由中出现的一种模式,并且出于身份验证/授权的原因,我希望为此更新操作提供一个单独的路由。
谢谢
发布于 2019-05-15 03:39:47
有一个很好的插件,叫做ember-routable-modal
在您的路由中,您可以扩展它们的混合:
// app/routes/example.js
import Ember from 'ember';
import ModalRouteMixin from 'ember-routable-modal/mixins/route';
export default Ember.Route.extend(ModalRouteMixin, {
});
然后使用一些特殊的标记:
// app/templates/example.hbs
<div class="routable-modal--dialog">
<div class="routable-modal--content">
<div class="routable-modal--header">
{{routable-modal-close-button class="routable-modal--close"}}
<h4 class="routable-modal--title">Modal title</h4>
</div>
<div class="routable-modal--body">
Content
</div>
</div>
</div>
现在,每当您导航到/example时,通过常用的{{
- to }}帮助器或通过在路由中调用this.transitionTo(),示例模式将呈现在当前活动的路由之上。如果直接从/example URL加载页面,则最接近的父路由将呈现在模式下。
如果您愿意,您可以自由删除所提供的模板并构建您自己的对话框组件,该插件非常灵活。
如果你想使用你自己的插件,那就用这个插件作为灵感。这里的主要思想是利用renderTemplate路由挂钩在其他地方呈现
renderTemplate() {
this.render({
into: 'application',
outlet: 'routable-modal-outlet'
});
}
https://stackoverflow.com/questions/56137340
复制相似问题