EmberJS - Primeiros Passos

por: Anderson de Castro

AGENDA

1. O que é?

2. Conceitos Básicos

3. Templates

4. Demo

“A framework for creating

ambitious web applications”

Responsáveis...

Conceitos Básicos

TEMPLATES

Onde ficará a interface da aplicação.

<script type=”text/x-handlebars” id=”application”>

Hello EmberJS!

{{outlet}}

</script>

ROUTER

Responsável por gerencia o estado do aplicativo.

App.Router.map(function(){

this.resource(“usuarios”);

this.resource(“contato”);

});

http://minhaaplicacao.com/#/usuarios

http://minhaaplicacao.com/#/contato

COMPONENTS

Tag HTML customizada. Útil para criar controles reutilizáveis na aplicação.

<script type=”text/x-handlebars” id=”components/twitter-foto”>

<img src=”http://www.gravatar.com/avatar/email_hexMD5?s=200” alt=””>

</script>

Meu Avatar

{{twitter-foto}}

MODELS

Objeto que guarda o estado de persistência. É apresentado para o usuário através dos

templates.

App.Pessoa = DS.Model.extend({

nome: DS.attr(‘string’),

email: DS.attr(‘string’)

});

ROUTE

É um objeto que diz ao Template qual objeto será apresentado.

App.IndexRoute = Ember.Route.extend({

model: function(){

return $.getJSON(‘https://api.github.com/repos/emberjs/ember.js/pulls');

}

});

CONTROLLERS

Objeto que armazena o estado da aplicação. Propriedades podem ser recuperadas e

transmitidas ao Template.

App.PessoaController = Ember.ObjectController.extend({

adicionar: function(){ console.log(“adicionando nova pessoa...”); },

editando: false

});

VIEWS

Obs.:

- Precisa sofisticar o tratamento de eventos de usuário?

- Precisa criar componentes reutilizáveis?

Então, USEMOS uma View!

VIEWS

NO HTML:

<script type=”text/x-handlebars” id=”diga-ola”>

Como vai {{view.nome}}

</script>

NO JS:

var view = Ember.View.create({

templateName: ‘diga-ola’,

nome: ‘Maria Rita’

});

VIEWSNo HBS

{{#view App.Clicavel}}

Pode clicar aqui!

{{/view}}

No JS

App.Clicavel = Ember.View.extend({

click: function(evt){

alert(“Você acabou de clicar aqui!”);

}

});

DEMONSTRAÇÃO

- Aplicação que cadastre pessoas e suas redes sociais.

- Apresentar listagem desses com seus respectivos avatares e usuários de contas.

Referências:

Site Oficial: http://emberjs.com

Site brasileiro: http://emberjs.com.br

Grupo: https://www.fb.com/groups/EmberJS.Brasil

OBRIGADO!