ember.js - 以模态和自己的路线更新表格?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (8)

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

现有的屏幕将位于'\ vegetables'路线上,更新表格将显示在'\ vegetables \ update \ carrots'上。如果更新是传统形式,则不会有问题,但如何显示覆盖现有表格的表格?这有附加件吗?

我正在使用bootstrap来设置ui的样式,因此可以使用bootstrap模式,但我不确定它是如何适合模板的?

我已经看到了一些插件,但它们似乎都针对当前路径中出现的模式,出于身份验证/授权的原因,我想要一个单独的路由进行此更新操作。

谢谢

提问于
用户回答回答于

这个叫做ember-routable-modal的插件很棒

在你的路线中,你扩展他们的mixin:

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

现在,只要您通过通常的{{link-to}}帮助程序或通过在路径中调用this.transitionTo()导航到/ example,示例模式将呈现在当前活动路径之上。如果直接从/ example URL加载页面,则最近的父路径将在模式下面呈现。 如果您愿意,可以自由删除提供的模板并构建自己的对话框组件,插件非常灵活。

如果您想要自己动手,请使用该插件作为灵感。这里的主要思想是利用renderTemplate路由钩子在其他地方渲染

renderTemplate() {
    this.render({
        into: 'application',
        outlet: 'routable-modal-outlet'
    });
}

扫码关注云+社区

领取腾讯云代金券