EmberJS para iniciantes – Parte 1

É 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:

var App = Ember.Application.create();

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:

App.Router.map(function(){

this.route('index');

this.route('hello',{path : '/bem-vindo'});

});

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