Question

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

现有屏幕将位于路径“ \ vegetables”上，而更新表单将位于“ \ vegetables \ update \ carrots”上。如果更新是常规表单，那不会有问题，但是如何显示覆盖在现有表单上的表单呢？有这个附加组件吗？

我正在使用bootstrap来设置ui的样式，因此可以使用bootstrap模态，但不确定如何将其放入模板中？

我已经看到了许多插件，但是它们似乎都针对当前路由中出现的模式，出于身份验证/授权的原因，我希望为该更新操作使用单独的路由。

谢谢

Answer 1

在您的路线中，您可以扩展它们的混合：

// 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}}导航到/ example时   帮助程序或通过在路由内调用this.transitionTo（）来实现   模态将呈现在当前活动路线的顶部。如果您加载   直接从/ example URL获取页面，最接近的父路径将   呈现在模态下方。

您可以删除提供的模板并建立自己的对话框   如果您愿意的话，该插件是灵活的。

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

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

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

1 个答案: