title: Ember.js with Twitter Bootstrap Modal
body: <p>I have setup my application to use the ember routing architecture.  My index pages looks like this (for simplicity sake)</p>
  
  <pre><code>script(type='text/x-handlebars', data-template-name='application')
      div.container
          {{outlet}}
  </code></pre>
  
  <p>and my ember app like this</p>
  
  <pre><code>window.App = Em.Application.create({
      ApplicationController: Em.Controller.extend(),
      ApplicationView: Ember.View.extend({
      templateName: 'application'
      }),
      Router: Em.Router.extend({
          root: Em.Route.extend({
          doHome: (router, event) -&gt;
              router.transitionTo('home')
          doInbox: (router, event) -&gt;
              router.transitionTo('inbox')
          doInboxModal: (router, event) -&gt;
              $("#inbox").modal "show"
          home: Em.Route.extend({
              route: '/',
              connectOutlets: (router, event) -&gt;
                  router.get('applicationController').connectOutlet('home')   
          }),
          inbox:Em.Route.extend({
              route: '/inbox',
              connectOutlets: (router, event) -&gt;
                  router.get('applicationController').connectOutlet('inbox')  
          })
      })  
  })
  </code></pre>
  
  <p>I have the home and inbox working fine, but first of all, I am doing jquery in my doInboxModal to show the modal inbox. And if I want to then have a button on the modal inbox to go to the actual inbox page, it won't work.</p>
  
  <p>So, the question is, how do I properly use a Twitter Bootstrap Modal with ember routing?</p>