Ember JS … Carregando conteúdo no Template

Como o template interage com uma Route na aplicação

Nesse post, veremos uma das coisas mais bacanas em uma aplicação: como mostrar informações para o usuário na tela de apresentação. Não irei resgatar dados de serviços externos neste momento, porém o conceito é válido quando se trata de consumir uma API, webservice, etc. Ok? Vamos lá então!

A primeira coisa a fazer é ir ao arquivo “app.js” e criar uma Route. Aqui cabe uma explicação super importante. Ao usar Ember JS, você deve estar alinhado a filosofia de Convenção acima de Configuração. Ou seja, o que você ganha em tempo não configurando muito para as coisas funcionarem em Ember JS, você terá que cuidar para seguir a linha de convenções que ele trás para que o nosso trabalho fique sempre padronizado e tudo dê certo sempre. No começo pode ser um pouco custoso ficar lembrando de algumas convenções, mas creia que é muito simples você fixá-las com o tempo!

A convenção de nomes é bastante simples, e diz que quando temos um template, por exemplo, chamado “artistas”, todas as partes envolvidas na aplicação que venham a ser desse escopo terão que acompanhar este nome. Para ficar claro, pense em criar uma rota agora para artistas. A rota se chamaria “artistas”; o route se chamaria ArtistasRoute; o template se chamaria artistas; o controller se chamaria ArtistasController; e assim por diante, sempre mantendo o nome como um padrão.

Retomando de onde paramos, precisamos construir uma estrutura Route para artistas e uma para musicas. Você pode fazer isso conforme a imagem:

Perceba que dentro de cada Route tem uma função chamada “model” que retorna um array. Neste caso o array retornado contém alguns objetos. Este model que é visto no código se trata do conteúdo em si que será apresentado na tela para o usuário, dentro dos seus respectivos templates.

Aqui os dados estão fixos, porém eles poderiam (e deveriam em aplicações reais) vir de uma chamada a algum webservice, tranquilamente.

Depois desse passo, podemos partir para os templates que queremos alterar. No caso, o template artistas irá estar apto a atuar com o model de ArtistasRoute e o template musicas atuará com o model de MusicasRoute. Simples, não?! Veja na imagem:

Explicando o código acima:
- o {{each}} é o laço responsável por repetir cada um dos elementos compostos no array retornado para o model do Route. Observe que o helper each tem uma abertura ({{#each}}) e um fechamento ({{/each}}) padrão.
- cada propriedade (campo) é adicionada entre chaves (ex.: {{genero}}), e será dinamicamente preenchida pelo seu respectivo conteúdo, gerado no Route.

A formatação da interface fica a seu critério! Ao final, você poderá ter algo parecido com a imagem:

Acima, está apenas a tela do template musicas, porém o template de artistas também ficará parecido com este.

Agora você já pode fazer coisas um pouco melhores ainda, não é? Teste e aproveite.

Até a próxima e bons estudos!