首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >ember.js -在模式中和在自己的路线上更新表单?

ember.js -在模式中和在自己的路线上更新表单?
EN

Stack Overflow用户
提问于 2019-05-15 03:28:00
回答 1查看 77关注 0票数 0

在3.x的Ember.js应用程序中,我想向用户显示现有屏幕上的更新表单重载。

现有的屏幕将位于路径‘\ screen’上,而更新表单将位于‘\screen\ update \carrots’上。如果更新是传统的表单,就不会有问题,但是如何在现有表单上显示覆盖的表单呢?这个有没有附加功能?

我正在使用bootstrap来设计ui样式,所以可以使用bootstrap模态,但我不确定如何将其应用到模板中?

我看到了许多插件,但它们似乎都是针对当前路由中出现的一种模式,并且出于身份验证/授权的原因,我希望为此更新操作提供一个单独的路由。

谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-15 03:39:47

有一个很好的插件,叫做ember-routable-modal

在您的路由中,您可以扩展它们的混合:

代码语言:javascript
复制
// app/routes/example.js
import Ember from 'ember';
import ModalRouteMixin from 'ember-routable-modal/mixins/route';

export default Ember.Route.extend(ModalRouteMixin, {
});

然后使用一些特殊的标记:

代码语言:javascript
复制
// 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路由挂钩在其他地方呈现

代码语言:javascript
复制
renderTemplate() {
    this.render({
        into: 'application',
        outlet: 'routable-modal-outlet'
    });
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56137340

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档