How to create and manage Twitter Bootstrap block using Ember.js

Question

I managed to get a good bootstrap modal to correctly show / hide and show the msg stored on the modal controller as shown here: Ember Bootstrap modal example

Corresponding code {

// context <script type="text/x-handlebars" data-template-name="application"> <div class="container"> {{outlet}} </div> <div id="modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="ariaLabel" aria-hidden="true"> {{render "modal"}} </div> </script> // modal template <script type="text/x-handlebars" data-template-name="modal"> <div class="modal-header"> <h2>{{title}}</h2> </div> <div class="modal-body"> <h4>{{{msg}}}</h4> </div> <div class="modal-footer"> <div class="span3 pull-right"> <button id="modalBtn" data-dismiss="modal" aria-hidden="true" style="vertical-align:bottom" {{bindAttr class=":btn :btn-large :btn-block isCorrect:btn-success:btn-danger" }} {{action "callback"}}> {{btn}} </button> </div> </div> </script> 

 // controllers App.HomeController = Ember.Controller.extend({ needs: ['modal'], showModal: function(){ var modCon = this.get('controllers.modal'); if( modCon.get('isCorrect') ){ // some logic modCon.setProperties({ title: 'Correct', msg: 'You get points', btn: 'Next' }); } else{ modCon.setProperties({ title: 'Incorrect', msg: 'Please try again', btn: 'Close' }); } $('#modal').modal(); // show } }); App.ModalController = Ember.Controller.extend({ isCorrect: true, title: 'modCon title', msg: 'modCon message', btn: 'modCon btn label', callback: function(){ alert('modal controller caught action'); } }); 

I post this here for two reasons:

• Am I doing it right? With Ember, it can be difficult to understand how developers planned certain things.
  
• If others can help improve / verify its validity, then this can serve as an example for those who have a desire to implement Bootstrap modalities in Ember.js

Answer 1

For Ember CLI users, here are some recent links approaches / updates:

https://github.com/mattbeedle/ember-cli-bootstrap-modal-example

http://indexiatech.imtqy.com/ember-components/#/overview

Answer 2

Take a look at Ember for Bootstrap, it has simple but powerful ways to use Bootstrap modality in Ember:

Modal demo: http://ember-addons.imtqy.com/bootstrap-for-ember/#/show_components/modal

GitHub repo: https://github.com/bootstrap-for-ember/bootstrap-for-ember

Answer 3

This is another way to do what you want.

What I did was so modal:

 <!-- modal edit dialog --> <div class="modal hide fade" tabindex="-1" id="editView"> {{view MainApp.ModalContainerView elementId="modalContainerView"}} </div> 

Where "MainApp.ModalContainerView" is a container. Then, when I wanted to display / show any template for the model, I did this:

  var containerView = Em.View.views['modalContainerView']; if(containerView == undefined) return; var temp = containerView.toArray(); if(temp.length > 0) containerView.removeAllChildren(); containerView.addObject(view); 

Where to "view" his presentation, which you want to show in modal mode. Please note that I am deleting the last view that is in the “modalContainerView” to be sure that I have no view in this container.

Finally, I need to show only the modality:

 $('#editView').modal({ show : true, keyboard : true, resizeToFit : true }); 

I hope this can help you.

Juanitos

Answer 4

Many times I use the modal as a separate template with my own route and controller, because the modals in my applications are very powerful and need to serve several ajax calls.