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...
ROUTER
Responsável por gerencia o estado do
aplicativo.
App.Router.map(function(){
this.resource(“usuarios”);
this.resourc...
COMPONENTS
Tag HTML customizada. Útil para criar
controles reutilizáveis na aplicação.
<script type=”text/x-handlebars” id...
MODELS
Objeto que guarda o estado de persistência. É
apresentado para o usuário através dos
templates.
App.Pessoa = DS.Mod...
ROUTE
É um objeto que diz ao Template qual objeto
será apresentado.
App.IndexRoute = Ember.Route.extend({
model: function(...
CONTROLLERS
Objeto que armazena o estado da aplicação.
Propriedades podem ser recuperadas e
transmitidas ao Template.
App....
VIEWS
Obs.:
- Precisa sofisticar o tratamento de eventos de
usuário?
- Precisa criar componentes reutilizáveis?
Então, USE...
VIEWS
NO HTML:
<script type=”text/x-handlebars” id=”diga-ola”>
Como vai {{view.nome}}
</script>
NO JS:
var view = Ember.Vi...
VIEWS
No HBS
{{#view App.Clicavel}}
Pode clicar aqui!
{{/view}}
No JS
App.Clicavel = Ember.View.extend({
click: function(e...
DEMONSTRAÇÃO
- Aplicação que cadastre pessoas e suas
redes sociais.
- Apresentar listagem desses com seus
respectivos avat...
Referências:
Site Oficial: http://emberjs.com
Site brasileiro: http://emberjs.com.br
Grupo: https://www.fb.com/groups/Embe...
OBRIGADO!
EmberJS - Primeiros Passos!
Upcoming SlideShare
Loading in...5
×

EmberJS - Primeiros Passos!

494

Published on

Palestra de introdução ao EmberJS. Objetivo de serem realizadas em especial, nas faculdades de Computação e Sistemas.

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
494
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

EmberJS - Primeiros Passos!

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

    Clipping is a handy way to collect important slides you want to go back to later.

×