Ember JS … Actions e Controllers

Usando ações em conjunto com controllers

Com o Ember JS podemos criar ações a partir de eventos realizados nos componentes da interface da nossa aplicação. Digamos que queremos excluir um artista da nossa listagem. Então vamos lá!

O código fonte desta série de artigos está disponível no Github: https://github.com/andersondecastro/tutorial-ember

O primeiro passo é criar um elemento <button> simples do HTML dentro do nosso template (de artistas). Nele atrelaremos uma action chamada “remover” e passaremos um parâmetro que será a referência do objeto que queremos atingir (usamos o this para isso!) da seguinte forma:

Agora, se você atualizar seu navegador, e ir até a tela artistas verá que já tem um botão para cada artista. Até aí tudo ok! Porém, se você clicar nele, obterá um erro. Este acusará que você está tentando acessar uma ação inexistente para este botão. Ou simplesmente, a action “remover” não existe. Veja a imagem:

Você precisa neste momento ir até o arquivo “app.js” e adicionar um controller. Guiados pelas convenções do Ember JS, vamos criá-lo chamando-o de ArtistasController. O conteúdo deste controller será uma propriedade chamada actions, que conterá todas as actions de nossa aplicação referentes ao escopo de artistas. Confira na imagem:

Você pode notar que a action remover é uma função simples. Ela possui um parâmetro que será recebido lá no template (na chamada da action). O resultado desta função é apenas a remoção do objeto pretendido dentre os demais do mesmo model.

Agora você já pode testar e ver que, ao clicar em remover, de qualquer artista, o mesmo deixa de fazer parta da interface de sua aplicação.
Perceba que quando atualizar novamente o navegador, todos os seus artistas estarão de volta, como se nada tivesse acontecido, na lista. Isso ocorre porque não estamos persistindo nenhuma alteração por enquanto. Mas a partir deste ponto já é possível, ok?!

Espero que estejam gostando desta série de posts. Desejo continuar escrevendo para que possamos massificar o aprendizado de Ember JS, principalmente em países de língua latina como o Brasil! Compartilhem, comentem e aproveitem!

Até a próxima e bons estudos!