CRUD using a modal input form

Questions Routing
1

Hi, I have a pretty standard CRUD for clients. The main route is clients.js, and the subroutes are index.js, show.js, edit.js, etc. You know…, mostly the structure learned from tutorials. :slight_smile:

But I want the edit form page to be loaded as a modal OVER the show page.

It seems that “ember-modal-dialog” can be used to display a model for a specific route (GitHub - yapplabs/ember-modal-dialog: An ember-cli addon for implementing modal dialogs).

After some intents, as promised, my edit route pops as modal, with the edit form template, BUT the show template disappears from the background. Only the headers remain.

I think that this is not the right approach. As far as I know (as a newbie) the edit form template still REPLACES the show template. The only difference is that the {{modal-dialog}} tags forces the template to go modal.

So… what should be a right technique? A dumb input form without a route?

Thank you in advance.

Nacho B.

2

Think of outlets as things that templates get plugged into. If you move from show to edit, you’ll unplug show and plug in edit. That would cause the modal to be rendered, but the show page to disappear! :astonished:

One idea would be to move the modal up to the same template that has the {{outlet}}. This way you can show the edit modal while the show template is still plugged in…


{{! a routes template }}

{{outlet}}

{{#if isShowingEdit}}
  {{#modal-dialog}}
    This edit modal can be shown while 
    the post show route is plugged into the outlet!
  {{/modal-dialog}}
{{/if}}
1 Like
3

Thank you!

It seems to be a good option, and now I have a better understanding of the outlet thingie.

The only drawback is that the modal form has no route. And I don’t know yet if this could be a problem in a future “proper” application. Nevertheless I can maintain the original “/clients/edit:id” route, can’t I?

Also, the model is also updated in the show template, in real time. I have just found the rollbackAttributes() function. If I call it when the user clicks cancel, the model should remain unchanged. I presume :slight_smile:

Regards:

Nacho B