CODEWITHSUNDEEP
twitter-bootstrapember.js
shearichard
shearichard

Reputation: 8372

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

Within a 3.x Ember.js app I want to show the user an update form overload over the existing screen.

The existing screen would be on a route '\vegetables' and the update form would be on '\vegetables\update\carrots'. If the update was a conventional form there wouldn't be a problem but how do I go about displaying a form overlaid on the existing form ? Is there an add-on for this ?

I'm using bootstrap to style the ui and so bootstrap modals are available but I'm not sure how that would fit into a template ?

I have seen a number of addons but they all seem to be aimed at a modal appearing within the current route and for reasons of authentication/authorization I want a seperate route for this update operation.

Thanks

Upvotes: 0

Views: 96

Answers (1)

mistahenry
mistahenry

Reputation: 8744

There's a nice addon for this called ember-routable-modal

In your route, you extend their mixin:

// app/routes/example.js
import Ember from 'ember';
import ModalRouteMixin from 'ember-routable-modal/mixins/route';

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

And then use some special markup:

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

If you feel like rolling your own, use that addon as inspiration. The main idea here is that to leverage the renderTemplate route hook to render elsewhere

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

Upvotes: 2

Related Questions