Bootstrap + Ember.js guide. Part 1: Modal windows in Amber or how to make friends Bootstrap Modal and Ember.js

If you love Bootstrap, actively use it in your work and decide to plunge into the world of ember.js, then you will have an exciting journey through the back streets of Stack Overflow in search of answers to dozens of questions. My guide to the galaxy Ember.js is able to answer some of them, for example:

How to use modal Bootstrap windows in Ember.js?

Before moving on to the answer, you need a spectacular introduction for my guidebook as a whole. Without thinking twice, I remembered two short words that will certainly support those who want to conquer the universe ember.js
')
"DON'T PANIC!"

Good start. Go!

Let's estimate what needs to be considered when using modal windows:

1. easy integration into any part of the application
2. transfer of different models to modal windows, depending on the situation
3. adjusting sizes and styles of modal windows

The modal window will be loaded via the auxiliary {{outlet 'modal'}}. For example, we want to make editing songs on the / songs page. The template for / songs will look like this:

// templates/songs /* */ {{outlet 'modal'}} //      

Now we need to create the modal-window.hbs component and bring all elements of the header and footer of the modal window into it.

 ember generate component modal-window 

Place the following code in it:

 /templates/components/modal-window.hbs <div class="modal fade"> <div class="modal-dialog {{size}}"> // {{size}} -       <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">{{title}}</h4> //  </div> <div class="modal-body"> {{yield}} //        </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"></button> <button type="button" class="btn btn-primary" {{action 'save'}}> </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Please note that we have added the {{size}} variable. We will pass a class to it to control the size of the modal window (modal-sm, modal-lg). By analogy, you can add classes to any other block.

{{yield}} is the place where the main part of the modal window will be displayed. To her back later. If you do not know how to use the components, you can familiarize yourself with the guide here .

It would be nice to immediately add actions for the “save” and “close” buttons, which are located in the footer of the modal window. To do this, add the following code to the class of our components / modal-window.js component:

 //components/modal-window.js actions: { save: function() { this.$('.modal').modal('hide'); this.sendAction('save'); } }, show: function() { this.$('.modal').modal().on('hidden.bs.modal', function() { this.sendAction('close'); }.bind(this)); }.on('didInsertElement') //     

Now the fun part.

Create a new template that will be displayed in {{yield}} of the component created above and it will also be loaded into {{outlet 'modal'}}

 ember generate template modals/song 

Paste the following code in there.

 //templates/modals/song.hbs {{#modal-window title=" " size="modal-sm" save='save' close='removeModal'}} <form {{action 'save' on='submit'}}> {{input type="text" value=name class="form-control"}} {{input type="text" class="form-control" value=fromServ}} </form> {{/modal-window}} 

We passed the parameters to the component (title, size, save, close). Now we will create a controller for this template:

 ember generate controller modals/song 

Add an action to the save button:

 // controlers/modals/song actions: { save: function() { //  } } 

The final stage - we need to specify which template with which parameters to ship to {{outlet 'modal'}}.

To do this, simply pass the parameters through the call button of the modal window:

 // templates/songs -      /* */ <button {{ action 'showModal' //    'modals/song' //   model //   }}>  </button> {{outlet 'modal'}} //      

Then we hang up the handler for 'showModal' right in the route template, in which there is {{outlet 'modal'}}, in our case, routes / songs:

 //routes/songs actions: { showModal: function(name, model) { this.render(name, { into: 'songs', outlet: 'modal', model: model }); }, removeModal: function() { this.disconnectOutlet({ outlet: 'modal', parentView: 'songs' }); }, } 

Once again about the main thing.

By clicking on the call button of the modal window, we get the following parameters:

1. action 'showModal' - which we describe in the reception of the template in which we want to display a modal window
2. 'modals / song' is the template that will be loaded along with the modal window component
3. model - model for this modal window

Then the showModal method is called, which places the modal window template with the required model in {{outlet: 'modal'}}
In the template of the modal window, the component of the modal window is loaded, and in the place with it the show function, which displays the modal window on the screen.

Done! Thanks for attention.

PS: Thank you EmberGuru for the idea.