Ember JS … Roteando

Usando link-to e route!

No post anterior falamos de uma visão geral da aplicação Ember JS, usando o Starter Kit disponível no site do framework. Iremos agora criar algumas coisas mais interessantes e assim, ir avançando no entendimento de como as coisas acontecem!

No arquivo original “index.html” adicione alguns templates. Aqui, estou considerando uma hipotética aplicação de músicas brasileiras. E estou interessado em artistas e músicas. Criei portanto 2 templates: um chamado “artistas” e outro com o nome de “musicas”. E sabe aquele template “index”? Pois então… eu editei o conteúdo dele, adicionando apenas uma frase de boas vindas ao usuário, ok?!

Considerando ainda a imagem acima, veja que temos 3 linhas com o helper “{{link-to}}”, que nada mais é do que um facilitador para criar âncoras (tipo o <a href> mesmo!). Em ember usaremos ele quando se trata de direcionar para algum template. Ou melhor, para uma rota (route). A rota em si cuidará de mandar o usuário para um ou outro template.

Até este ponto, tudo parece certo. Se você tentar rodar a aplicação no navegador, irá ver que um erro acontece (use o console [F12] durante o desenvolvimento da aplicação!). A acusação é de que não há rotas definidas ainda para “artistas” e nem para “musicas”.

O que fazer então?!
Crie as rotas (this.route) no arquivo “app.js”, conforme a imagem:

Agora atualize seu navegador, e veja que tudo estará ok! Navegue entre os templates através dos links e veja como está funcionando. A partir daí, o conteúdo apresentado em cada uma das telas (templates) é com você!

No próximo post, irei falar como carregar conteúdo para as telas de apresentação. Continue ligado!

Até breve e bons estudos.