Ember.js with Twitter Bootstrap Modal

Question

I have configured my application to use ember routing architecture. My index pages look like this (for simplicity)

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

and my ember application 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 a work and mailbox, but first of all I do jQuery in my doInboxModal to show modal inbox. And if I want to have a button in a modal mailbox to go to the actual page of incoming messages, it will not work.

So the question is, how to properly use Twitter Bootstrap cheater with ember tracing?

Answer 1

When you head to the view, call the didInsertElement modal file, which will load the modal text. If you want modal loading in the inbox view

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

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> 

Thus:

• The modal will be displayed when the button is pressed
• the look behind does not go away
• The modal button will be hidden when the button is pressed

Answer 2

I have a post about using Twitter Bootstrap modules with Ember.js if someone wants an additional link:

http://generali.st/en/site/topics/show/82-modal-forms-in-emberjs

Includes working JSBin for the full source. There are also several strategies for drying molds. IMO, naming things is also more arbitrary.

Answer 3

I spent some time studying Discourse to find out how they do it. Mostly they have a single-modem modem, and the router processes events to show and hide the modal.

Here are some interesting bits:

discourse / application / assets / JavaScripts / discourse / routes / discourse_route.js

  showModal: function(router, name, model) { router.controllerFor('modal').set('modalClass', null); router.render(name, {into: 'modal', outlet: 'modalBody'}); var controller = router.controllerFor(name); if (controller) { if (model) { controller.set('model', model); } controller.set('flashMessage', null); } } 

discourse / application / assets / JavaScripts / discourse / routes / application_route.js

  events: { editCategory: function(category) { Discourse.Route.showModal(router, 'editCategory', category); router.controllerFor('editCategory').set('selectedTab', 'general'); } 

discourse / application / assets / JavaScripts / discourse / view / modal / modal_body_view.js

  Discourse.ModalBodyView = Discourse.View.extend({ // Focus on first element didInsertElement: function() { $('#discourse-modal').modal('show'); var controller = this.get('controller'); $('#discourse-modal').on('hide.discourse', function() { controller.send('closeModal'); }); $('#modal-alert').hide(); var modalBodyView = this; Em.run.schedule('afterRender', function() { modalBodyView.$('input:first').focus(); }); var title = this.get('title'); if (title) { this.set('controller.controllers.modal.title', title); } }, willDestroyElement: function() { $('#discourse-modal').off('hide.discourse'); } }); 

discourse / application / assets / javascripts / discourse / mixins / modal_functionality.js

  Discourse.ModalFunctionality = Em.Mixin.create({ needs: ['modal'], /** Flash a message at the top of the modal @method blank @param {String} name the name of the property we want to check @return {Boolean} **/ flash: function(message, messageClass) { this.set('flashMessage', Em.Object.create({ message: message, messageClass: messageClass })); } }); 

Application / assets / JavaScripts / discourse / templates / modal / modal.js.handlebars

  <div class="modal-header"> <a class="close" {{action closeModal}}><i class='icon-remove icon'></i></a> <h3>{{title}}</h3> </div> <div id='modal-alert'></div> {{outlet modalBody}} {{#each errors}} <div class="alert alert-error"> <button class="close" data-dismiss="alert">×</button> {{this}} </div> {{/each}} 

And in their application.js.handlebars: {{render modal}}