title: reusable components in Ember.js - how to deal with Bootstrap modal?
body: <p>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.</p>
  
  <p>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).</p>
  
  <p><strong>My intention is to show modal on <code>apply</code> action each time it is triggered</strong>. 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.</p>
  
  <p>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?</p>
  
  <p><a href="http://jsbin.com/igitec/1/" rel="nofollow">http://jsbin.com/igitec/1/</a></p>
  
  <h2>Update</h2>
  
  <p>You can find the updated and working example here: <a href="http://jsbin.com/igitec/3/" rel="nofollow">http://jsbin.com/igitec/3/</a>
  In the near future <a href="https://github.com/emberjs/ember.js/pull/2490" rel="nofollow">we will bwe will be ablee able</a> to use modals and other components more easily but for now we've got to use them in kind of convoluted way.</p>