ember.js

Question

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

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

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

我见过很多插件，但它们似乎都针对当前路线中出现的模态，并且出于 authentication/authorization 的原因，我想要一个单独的路线来进行此更新操作。

谢谢

Answer 1

有一个很好的插件叫做 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>

Now whenever you navigate to /example, through the usual {{link-to}} helper or by calling this.transitionTo() within a route, the example modal will render on top of your currently active route. If you load the page from the /example URL directly, the closest parent route will be rendered underneath the modal.

You are free to delete the provided template and build your own dialog component if you wish, the addon is flexible.

如果您想推出自己的插件，请使用该插件作为灵感。这里的主要思想是利用 renderTemplate 路由挂钩在其他地方呈现

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

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

ember.js - update form in modal and on its own route?

twitter-bootstrap