Por um tempo, eu estive pensando sobre a melhor forma de lidar com a exibição de caixas de diálogo modais para os meus aplicativos ao utilizar views Backbone. Um monte de ideias interessantes passou pela minha cabeça, mas nenhum delas parecia exatamente certa. Então eu vi um artigo de Derick Bailey, no qual ele descreveu como usa Regions do Marionette para lidar com o trabalho. Seu artigo é um pouco sobre o lado antigo, e Regions mudaram um pouco, então eu decidi ver como poderia fazê-lo sozinho.

As questões

Há várias questões que envolvem a criação de diálogos modais apenas com uma view. Como Derick fala em seu artigo, a maioria dos plugins para criar esses diálogos irá remover (ou apenas mover) o elemento real do DOM, então todos os eventos que você configurou na view serão perdidos.

Junto com isso, perdemos a capacidade de reutilização. Ao fazer a view lidar com o trabalho de controlar o modal, isso não pode ser usado em um lugar onde você não queira uma janela modal. Ao mover a funcionalidade modal para fora da view, ela pode ser utilizada em qualquer lugar da aplicação.

A solução

Agora que sabemos o que precisamos para extrair a funcionalidade modal em views, é apenas uma questão de descobrir onde colocá-la. Regions do Marionette são perfeitos para isso. Regions são objetos que representam um lugar que já existe no DOM, e eles lidam com adição e remoção de views de/para aquele lugar no DOM. Basta chamar`show` em um Region para adicionar um views lá e chamar `close` para removê-lo.

Tudo o que precisamos fazer é aumentar um Region para chamar o método do plugin para mostrar o modal quando a view é exibida. Certifique-se de esconder o modal quando a view é fechada, e feche a view quando o modal estiver escondido.

Aqui eu desenvolvi um `ModalRegion` que utiliza um plugin modal do Twitter Bootstrap:

[javascript]

var ModalRegion = Marionette.Region.extend({
constructor: function() {
Marionette.Region.prototype.constructor.apply(this, arguments);

this.ensureEl();
this.$el.on(‘hidden’, {region:this}, function(event) {
event.data.region.close();
});
},

onShow: function() {
this.$el.modal(‘show’);
},

onClose: function() {
this.$el.modal(‘hide’);
}
});

[/javascript]

Existem algumas coisas dignas de nota aqui:

– Criei uma função ‘construtor` em vez de `initialize`. Isso porque se alguém estende esse Region, substituirá essa função `initialize` com a dele. Dessa forma, não será substituída.

– Eu chamo `this.ensureEl ()`. Esse é o método de um Region para armazenar em cache o objeto jQuery do elemento Regions para `this.$el`. Normalmente, esse método é chamado em seu método `show`, mas precisávamos que `this.$el` fosse configurado antes disso.

– Há algumas coisas estranhas acontecendo nesse manipulador de eventos:

◦ O evento ‘hidden’ é disparado pelo Twitter Bootstrap depois que ele esconde o modal.

◦ O objeto que é passado como o segundo parâmetro para `on` é um objeto de dados que está ligado a `event` como sua propriedade `data`. Isso não é comumente usado, por isso muitas pessoas não sabem que ela existe. Se isso é novidade para você, confira a API. Passei por esse objeto como uma forma de me certificar de que o método `close ‘foi chamado para o Region com o contexto certo. Existem várias formas alternativas para fazer isso, e esta provavelmente não é a melhor maneira, mas evita um encerramento, e isso me ajuda a ensinar algo que você não sabia antes.

◦ `onShow` e `onClose` são chamados imediatamente após os métodos `show` e `close` terem terminado. Essa é uma maneira simples para que possamos aumentar os métodos `show` e `close`, para fazerem mais do que fazem normalmente, sem substituir as funções.

Agora é simples de usar:

[javascript]

var modal = new ModalRegion({el:’#modal’});
var view = new SomeView();

modal.show(view);

[/javascript]

Conclusão

Simples assim. Isso pode ser alterado muito facilmente para usar outros plugins, como jQueryUI, KendoUI, Wijmo etc. Além disso, agora que a funcionalidade modal está em um lugar, se você acabar trocando o plugin que você usa, você só tem que mudar o código nesse Region, e tudo deve funcionar bem. A única coisa que você precisa para trabalhar é receber todo o markup específio do modal lá.

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://www.joezimjs.com/javascript/using-marionette-to-display-modal-views/