O documento apresenta uma introdução ao framework EmberJS, descrevendo seus principais conceitos e componentes como templates, router, components, models, routes, controllers e views. Apresenta também uma demonstração de uma aplicação de cadastro de pessoas e redes sociais para ilustrar o uso desses conceitos.
7. TEMPLATES
Onde ficará a interface da aplicação.
<script type=”text/x-handlebars” id=”application”>
Hello EmberJS!
{{outlet}}
</script>
8. 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
9. 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}}
10. 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’)
});
11. 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');
}
});
12. 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
});
13. VIEWS
Obs.:
- Precisa sofisticar o tratamento de eventos de
usuário?
- Precisa criar componentes reutilizáveis?
Então, USEMOS uma View!
15. VIEWS
No HBS
{{#view App.Clicavel}}
Pode clicar aqui!
{{/view}}
No JS
App.Clicavel = Ember.View.extend({
click: function(evt){
alert(“Você acabou de clicar aqui!”);
}
});
16. DEMONSTRAÇÃO
- Aplicação que cadastre pessoas e suas
redes sociais.
- Apresentar listagem desses com seus
respectivos avatares e usuários de contas.