Guia de início rápido de Ember.js mínimo viável de Mike Grassotti
Este guia de início rápido deve levá-lo de zero a um pouco mais que zero em alguns minutos. Quando terminar, você deve se sentir um pouco confiante de que o ember.js realmente funciona e, com sorte, estará interessado o suficiente para aprender mais.
AVISO: Não tente este guia, mas pense que ember-suga, porque "Eu poderia escrever aquele guia de início rápido melhor em jQuery ou Fortran" ou qualquer outra coisa. Não estou tentando convencê-los de brasa nem nada, este guia é pouco mais do que um alô-mundo.
Etapa 0 - Confira jsFiddle
este jsFiddle tem todo o código desta resposta
Etapa 1 - Incluir ember.js e outras bibliotecas necessárias
Ember.js requer jQuery e Handlebars. Certifique-se de que essas bibliotecas sejam carregadas antes de ember.js:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
Etapa 2 - Descreva a interface do usuário do seu aplicativo usando um ou mais modelos de guidão
Por padrão, o ember substituirá o corpo da sua página html usando o conteúdo de um ou mais modelos de barras de orientação. Algum dia esses modelos estarão em arquivos .hbs separados montados por sprockets ou talvez grunt.js. Por enquanto, vamos manter tudo em um arquivo e usar tags de script.
Primeiro, vamos adicionar um único applicationmodelo:
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
</div>
</script>
Etapa 3 - inicializar seu aplicativo ember
Basta adicionar outro bloco de script com App = Ember.Application.create({});para carregar ember.js e inicializar seu aplicativo.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
Isso é tudo que você precisa para criar um aplicativo básico do ember, mas não é muito interessante.
Etapa 4: adicionar um controlador
O Ember avalia cada modelo de guiador no contexto de um controlador. Portanto, o applicationmodelo tem uma correspondência ApplicationController. O Ember cria é automaticamente se você não definir um, mas aqui vamos personalizá-lo para adicionar uma propriedade de mensagem.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Etapa 5: definir rotas + mais controladores e modelos
O roteador Ember facilita a combinação de modelos / controladores em um aplicativo.
<script type='text/javascript'>
App.Router.map(function() {
this.route("index", { path: "/" });
this.route("list", { path: "/list" });
});
App.IndexController = Ember.Controller.extend({
message: 'Hello! See how index.hbs is evaluated in the context of IndexController'
});
App.ListRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
}
});
</script>
Para fazer isso funcionar, modificamos nosso modelo de aplicativo adicionando um {{outlet}}auxiliar. O roteador Ember processará o modelo apropriado na tomada, dependendo da rota do usuário. Também usaremos o {{linkTo}}auxiliar para adicionar links de navegação.
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
<div class="row">
{{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
{{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
</div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="list">
<h3 class="demo-panel-title">This is the list template</h3>
<ul>
{{#each item in content}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h3 class="demo-panel-title">This is the index template</h3>
<p>{{message}}</p>
</script>
Feito!
Um exemplo prático deste aplicativo está disponível aqui .
Você pode usar este jsFiddle como um ponto de partida para seus próprios aplicativos ember
Próximos passos...
- Leia os guias do Ember
- Talvez compre o screencast Peepcode
- Faça perguntas aqui no Stack Overflow ou no EMber IRC
Para referência, minha resposta original:
Minha pergunta é para qualquer especialista em Ember.js e, certamente, para os respectivos autores do tutorial: Quando devo usar padrões de design de um tutorial e quando do outro?
Esses dois tutoriais representam as melhores práticas na época em que foram escritos. Com certeza há algo que pode ser aprendido com cada um, ambos estão tristemente condenados a se tornarem desatualizados porque ember.js está se movendo muito rapidamente. Dos dois, o Trek's é muito mais atual.
Quais componentes de cada um são preferências pessoais e quais componentes serão essenciais conforme meu aplicativo amadurece? Se você estiver desenvolvendo um novo aplicativo ember, não recomendo seguir a abordagem do Code Lab. É muito desatualizado para ser útil.
No design do Code Lab, o Ember parece estar mais perto de existir dentro do aplicativo (embora seja 100% de seu JS personalizado), enquanto o aplicativo da Trek parece viver mais dentro do Ember.
Seu comentário é estrondoso. O CodeLab está tirando proveito dos principais componentes do ember e acessando-os de escopo global. Quando foi escrito (9 meses atrás), isso era bastante comum, mas hoje a melhor prática para escrever aplicativos ember está muito mais próxima do que o Trek estava fazendo.
Dito isso, até o tutorial do Trek está ficando desatualizado. Componentes que eram necessários ApplicationViewe ApplicationControlleragora são gerados pela própria estrutura.
De longe, o recurso mais atual é o conjunto de guias publicados em http://emberjs.com/guides/
- eles foram escritos do zero nas últimas semanas e refletem a versão mais recente (pré-lançamento) do ember.
Eu também verificaria o projeto wip do trek aqui: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
EDITAR :
@ sly7_7: Eu também daria outro exemplo, usando ember-data https://github.com/dgeb/ember_data_example