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 a fascinating journey through the back streets of Stack Overflow in search of answers to dozens of questions. My galaxy guide to Ember.js is able to answer some of them, for example:

How to use Bootstrap modal windows in Ember.js?

Before moving on to the answer, a spectacular introduction is necessary for my guidebook as a whole. Without thinking twice, I recalled two short words that would certainly support those who want to conquer the universe ember.js

“DON'T PANIC!”

Good start. Go!

Let's estimate what to consider when using modal windows:

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

We will load the modal window through 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 place all the elements of the header and footer of the modal window into it.

ember generate component modal-window

We will place the following code in it:

/templates/components/modal-window.hbs
    // {{size}} - переменная для динамического изменения модального окна
    
×
{{title}}
   //название модели
      

         {{yield}}                                       // сюда будем грузить уникальный контент модального окна
      
ЗакрытьСохранить изменения

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 where the main part of the modal window will be displayed. We will return to her a little later. If you do not know how to use the components, you can familiarize yourself with the official 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 component components / modal-window.js:

//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 be loaded into {{outlet 'modal'}}

ember generate template modals/song

Paste the following code there

//templates/modals/song.hbs
{{#modal-window title="Добавить песню" size="modal-sm" save='save' close='removeModal'}}
                    

                        {{input type="text" value=name class="form-control"}}
                        {{input type="text" class="form-control" value=fromServ}}
                    
{{/modal-window}}

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

ember generate controller modals/song

Add the action for the save button there:

// controlers/modals/song
  actions: {
    save: function() {
      // действие
    }
  }

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

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

// templates/songs - темплейт для вывода списка песен
/*Ваш код*/

   Редактировать

{{outlet 'modal'}} // место для отображения модального окна

Then we hang up the handler for 'showModal' directly in the route template, which contains {{outlet 'modal'}}, in our case it is 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 button for calling the modal window we get the following parameters:

1. action 'showModal' - which we describe in the rout of the template in which we want to display the modal window
2. 'modals / song' - template to be loaded together with the modal window component
3. model - model for this modal window

Then the showModal method is called, which places the template of the modal window with the desired 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 is the show function, which displays the modal window on the screen.

Done! Thanks for attention.

PS: Thanks to EmberGuru for the idea.