CODEWITHSUNDEEP
ember.js
wryrych
wryrych

Reputation: 1765

reusable components in Ember.js - how to deal with Bootstrap modal?

I have the following scenario to code. There is a list of credit cards. A user can click an Apply Now button. When the card being applied has an affiliate code, the user is forwarded directly to the provider site. But when there is no such a code, a modal should appear to ask the user to enter his or her e-mail address. If the address is valid, he can continue to the aforementioned provider site.

I looked at some solutions how to approach the problem with modals in Ember but quite don't know if my solution is good or not. One solution uses for example routing (app's state).

My intention is to show modal on apply action each time it is triggered. I tried Discourse approach but I don't quite know how to handle modalth appearance so that it appears only if the action is triggered.

Could you please take a look at my example and tell me what I did wrong and how could improve it? Maybe there are better solutions out there?

http://jsbin.com/igitec/1/

Update

You can find the updated and working example here: http://jsbin.com/igitec/3/ In the near future we will bwe will be ablee able to use modals and other components more easily but for now we've got to use them in kind of convoluted way.

Upvotes: 0

Views: 771

Answers (2)

Markus
Markus

Reputation: 1214

Somehow I can't comment, so I am writing it as an answer: It seems clicking outside a modal has a bug: You can close it by clicking outside, but then you can't re-open it. I will try to look at it as soon as I can (since I need it as well) and post a fix. Will probably also add the functionality for cloing it via the ESC button.

Upvotes: 0

Mike Grassotti
Mike Grassotti

Reputation: 19050

I had a look at your solution. Seems like it is able to render the modal once but does not handle close. The main thing you might do to improve is try disconnecting the outlet. Something like: 

this.render('nothing', { into: 'application', outlet: 'modal' });

Have a look at this answer for more detail: modal popup with ember 1.0 rc6

Upvotes: 1

Related Questions