Passing data to a modal - best practice

1

Since this issue seems to be too subjective to be posted on stackoverflow I am asking here. What is the latest best practice to pass data to a modal window in Ember?

Lets say I have a quite large list of items (it is actually a 2-dimensional map in my usecase) and on first click I want to open a modal window with a preview of content - I dont want to do any route transition yet.

I have run into several issues when trying to implement this:

  1. API-call indeed returns a promise. It is quite inconvenient to work with promises in computed properties. I couldnt return promised content just the promise itself which template cant handle. I tried self-setting the property but that worked only on first computing and with this solution computed properties stopped getting recomputed for me.
  2. Doing the api calls and setting all the relevant modal properties in one big observer works. But it is ugly and observer tends to be fired multiple times in a row. Things get messy.
  3. How to make modal window most easily reusable? Should it be a component? That is the way I tried it, yet now as I am typing this I realize it could be more reliable as a sub-route… I could handle the state better…

Thanks for any input on this :]

2

I believe GitHub - yapplabs/ember-modal-dialog: An ember-cli addon for implementing modal dialogs supports a modal dialog backed by a route, ie the only view for the route is the modal dialog. All you have to do is create a route like normal and the template is wrapped in an ember-modal-dialog.

2 Likes