Modal Views - can we agree on a best practice?

[jacobk]

Some good ideas on this topic was brought up in this thread about Discourse’s modals.

@teddyzeenny

I also try to make my controllers as thin as possible by moving events into the route. Unfortunately if a view does not represent a higher state (and thus no route exists for it), and might be re-used in any route, I either use App.ApplicationRoute to handle its events, or handle its events in its controller.

Elegantly formulates the lack of mapping to a “higher state” which I think is true for many modal scenarios.

@ashaegupta

I think a good, clean approach (especially with complex modals) is to have a stateManager control when a modal is shown or hidden, and more precisely, when a modal is inserted or removed from the DOM.

My basic architecture for this in pseudocode is:

create a modalStateManager object and an instance that is globally accessible put an outlet (e.g., {{outlet modal}} for the modal in your main template (i.e., the template where the user will click to open the modal) when user clicks to open modal, call an open function on your modalStateManager instance open function renders the modalView, modalTemplate and modalController into the modal outlet. (in old ember, you could do this with connectOutlets, I believe the new way is with renderTemplate) you’d then also have some function that closes modal (and can destroy the modal).

I actually did a presentation on this topic at the Ember.js meetup: it’s old ember, but the architecture should still be valuable. https://speakerdeck.com/ashaegupta/managing-modals-and-other-non-url-based-views-in-ember-dot-js

Brings up the usage of how StateMangers could be used for modals. I think there might be a lot of cool stuff that could be done with state machines for both simple and more complex, wizard flow kind of, modals.

I think this part of Peter Bergströms “Ember.js in the Wild” (slides) talk shows some really cool use cases for StateManagers which would marry well with modals.

Another requirement on modals should be that they need to work well with browser history (back/forward buttons). E.g. Discourse’s modals remain on screen even when you navigate away from the context that triggered them.