Ember.js with Twitter Bootstrap Modal

Question

I have setup my application to use the ember routing architecture. My index pages looks like this (for simplicity sake)

script(type='text/x-handlebars', data-template-name='application')
    div.container
        {{outlet}}

and my ember app like this

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) ->
            router.transitionTo('home')
        doInbox: (router, event) ->
            router.transitionTo('inbox')
        doInboxModal: (router, event) ->
            $("#inbox").modal "show"
        home: Em.Route.extend({
            route: '/',
            connectOutlets: (router, event) ->
                router.get('applicationController').connectOutlet('home')   
        }),
        inbox:Em.Route.extend({
            route: '/inbox',
            connectOutlets: (router, event) ->
                router.get('applicationController').connectOutlet('inbox')  
        })
    })  
})

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.

So, the question is, how do I properly use a Twitter Bootstrap Modal with ember routing?

Answer 1

When you route to a view, call the modal in the didInsertElement, which will load the modal..Assuming you want the modal to load on the inbox view

App.InboxView = Ember.View.extend({
  didInsertElement: function(){
    $("#my-modal").modal("show");
  }
})

your updated router:

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) ->
        router.transitionTo('home')
      doInbox: (router, event) ->
        router.transitionTo('inbox')
      home: Em.Route.extend({
        route: '/',
        connectOutlets: (router, event) ->
          router.get('applicationController').connectOutlet('home')   
      }),
      inbox:Em.Route.extend({
        route: '/inbox',
        connectOutlets: (router, event) ->
          router.get('applicationController').connectOutlet('inbox')  
      })
  })  
})

Hope this helps...

Updated Answer

App.InboxView = Ember.View.extend({
  templateName: "inbox",
  addNewEmail: function(){
    $("#my-modal").modal("show");
  },
  cancelNewEmail: function(){
    $("#my-modal").modal("hide");
  }
})

inbox.handlebars

<div id="inbox-container">
  <!-- 
    YOUR INBOX CONTENT
    The modal declared below wont show up unless invoked
  -->
  <a {{action addNewEmail}}>New Email</a>
  <a {{action cancelNewEmail}}>Cancel</a>
  <div class="modal hide fade in" id="my-modal">
    <!--
      Put your modal content
    -->
  </div>
</div>

This way:

• The modal will show on button click
• view behind doesn't go away
• The modal will hide on cancel button