É com muito prazer que começo a escrever aqui no Tableless para ajudá-lo a utilizar um dos melhores frameworks (IMHO) JavaScript atualmente: o EmberJS.
A ideia é ter uma série de artigos sobre EmberJS, visando atender aos que estão começando agora. Por isso, se você já é um cara avançado, não se empolgue, quero fazer algo bem light, certo? Vamos lá então!
Nesta primeira parte começaremos uma aplicação. Faremos com que o resultado seja mostrar uma mensagem de boas vindas ao usuário.
Lápis e caneta na mão… Oops, melhor: teclados a postos, vamos codar.
1. O Download
Primeiramente, vá até o site do nosso querido framework Ember (www.emberjs.com) e faça seu download. Esse passo é simples: basta apenas clicar no link “Download Starter Kit” e pronto.
2. Descompactar o Arquivo
Parece óbvio, mas como dito no início, vamos devagar: vá até onde você salvou o arquivo do Ember e descompacte-o. Depois disso, caso prefira, mude o nome da pasta para um nome mais sugestivo. Feito isso abra a pasta e veja seus diretórios e arquivos responsáveis pelo funcionamento do framework. Não vou me ater a isso aqui pois você pode encontrar detalhes aqui neste post.
3. Abrindo os arquivos!
Os arquivos que você trabalhará para alcançar nosso objetivo (neste artigo) serão o **index.html **e o **app.js. **Este último localizado na pasta “js“. Então, usando seu editor favorito (o meu é o Sublime!) abra estes dois arquivos para manipulá-los.
4. Criar a aplicação
No Ember, para que uma aplicação possa existir e funcionar, é necessário que se declare uma variável que crie uma Application. O arquivo app.js é o responsável por ter esta chamada. O código é simples e ocupa 1 linha apenas:
Sugiro que você não apenas mantenha o código que já vem escrito, mas apague e faça do zero mesmo. Assim poderá entender como as coisas vão acontecendo ao longo desta série.
5. Criar a Rota
A próxima coisa que temos a fazer é criar uma rota no nosso arquivo app.js. As rotas são muito importantes, pois são por onde chamaremos a aplicação (pela URL) e ela nos dirá quais dados carregar e em qual template. Todas as rotas ficarão mapeadas dessa forma:
Note que temos 2 rotas mapeadas: uma chamada index e outra hello. A conclusão é de que se digitarmos no URL, por exemplo, www.meuapp.com/index então a rota index chamará o template de mesmo nome para ser carregado para o usuário. Uma atenção para o segundo parâmetro do route é um objeto que contem a propriedade “path“. Neste caso, o que está escrito como valor de path pode ser digitado pelo usuário no URL e o template acionado será o **hello. **Maneiro, né?
6. Criar os templates
Agora que temos as rotas devidamente criadas e configuradas, podemos criar no arquivo index.html os nossos templates. Aqui vale lembrar que você verá um monte de coisas entre tags , certo? Pois bem. O Ember utiliza como engine de template padrão o Handlebars, e então essas tags são necessárias para que tudo rode nos conformes!
Pode apagar tudo (ou quase tudo). Tenha atenção na chamada dos scripts, pois há uma ordem devido as suas dependências. Jquery vem primeiro, depois Handlebars e por fim o EmberJS. Daí sim, você pode chamar seu app.js (aquele que estava mexendo até agorinha, não esqueceu né?!).
Para criar um novo template é simples, veja:
Como queremos o template hello, basta colocar o nome dele ali na propriedade **id **da tag script, certo? E mais uma coisa, note que o atributo type não é text/script, mas sim **text/x-handlebars, **por causa da engine que estamos usando.
Adicione algum conteúdo dentro do template, como por exemplo o tão clichê “Olá Mundo!”, para que seja visto na tela.
7. Testando…
Bem, por fim criamos os 2 templates que queríamos e a aplicação já pode ser vista, no navegador!
Sua URL será algo parecido com isso: https://localdasuaaplicacao/#bem-vindo e https://localdasuaaplicacao/#index
Missão cumprida por aqui, bons estudos e até o próximo!