EmberJS - Primeiros Passos!
-
Upload
anderson-de-castro -
Category
Software
-
view
532 -
download
5
description
Transcript of EmberJS - Primeiros Passos!
![Page 1: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/1.jpg)
EmberJS - Primeiros Passos
por: Anderson de Castro
![Page 2: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/2.jpg)
AGENDA
1. O que é?
2. Conceitos Básicos
3. Templates
4. Demo
![Page 3: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/3.jpg)
![Page 4: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/4.jpg)
“A framework for creating
ambitious web applications”
![Page 5: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/5.jpg)
Responsáveis...
![Page 6: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/6.jpg)
Conceitos Básicos
![Page 7: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/7.jpg)
TEMPLATES
Onde ficará a interface da aplicação.
<script type=”text/x-handlebars” id=”application”>
Hello EmberJS!
{{outlet}}
</script>
![Page 8: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/8.jpg)
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
![Page 9: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/9.jpg)
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}}
![Page 10: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/10.jpg)
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’)
});
![Page 11: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/11.jpg)
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');
}
});
![Page 12: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/12.jpg)
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
});
![Page 13: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/13.jpg)
VIEWS
Obs.:
- Precisa sofisticar o tratamento de eventos de usuário?
- Precisa criar componentes reutilizáveis?
Então, USEMOS uma View!
![Page 14: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/14.jpg)
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’
});
![Page 15: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/15.jpg)
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!”);
}
});
![Page 16: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/16.jpg)
DEMONSTRAÇÃO
- Aplicação que cadastre pessoas e suas redes sociais.
- Apresentar listagem desses com seus respectivos avatares e usuários de contas.
![Page 17: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/17.jpg)
Referências:
Site Oficial: http://emberjs.com
Site brasileiro: http://emberjs.com.br
Grupo: https://www.fb.com/groups/EmberJS.Brasil
![Page 18: EmberJS - Primeiros Passos!](https://reader036.fdocument.pub/reader036/viewer/2022082502/547d339bb4af9faa158b5381/html5/thumbnails/18.jpg)
OBRIGADO!