Guida rapida di Ember.js minima utilizzabile di Mike Grassotti
Questa guida rapida dovrebbe portarti da zero a leggermente più di zero in un paio di minuti. Al termine, dovresti sentirti un po 'sicuro che ember.js funzioni davvero e, si spera, sarai abbastanza interessato da saperne di più.
ATTENZIONE: Non limitarti a provare questa guida, quindi pensa che ember-fa schifo perché "potrei scrivere meglio quella guida rapida in jQuery o Fortran" o qualsiasi altra cosa. Non sto cercando di venderti su ember o altro, questa guida è poco più di un ciao-mondo.
Passaggio 0: controlla jsFiddle
questo jsFiddle ha tutto il codice da questa risposta
Passaggio 1: includi ember.js e altre librerie richieste
Ember.js richiede sia jQuery che Handlebars. Assicurati che quelle librerie siano caricate prima di 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>
Passaggio 2: descrivere l'interfaccia utente dell'applicazione utilizzando uno o più modelli di manubri
Per impostazione predefinita, ember sostituirà il corpo della tua pagina html utilizzando il contenuto di uno o più modelli di handlbar. Un giorno questi modelli saranno in file .hbs separati assemblati da sprockets o forse grunt.js. Per ora terremo tutto in un file e utilizzeremo i tag di script.
Innanzitutto, aggiungiamo un singolo applicationmodello:
<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>
Passaggio 3: inizializza la tua applicazione Ember
Basta aggiungere un altro blocco di script con App = Ember.Application.create({});per caricare ember.js e inizializzare l'applicazione.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
È tutto ciò di cui hai bisogno per creare un'applicazione Ember di base, ma non è molto interessante.
Passaggio 4: aggiungi un controller
Ember valuta ogni modello di manubrio nel contesto di un controller. Quindi il applicationmodello ha una corrispondenza ApplicationController. Ember crea è automaticamente se non ne definisci uno, ma qui personalizziamolo per aggiungere una proprietà del messaggio.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Passaggio 5: definire i percorsi + più controller e modelli
Il router Ember semplifica la combinazione di modelli / controller in un'applicazione.
<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>
Per far funzionare questo, modifichiamo il nostro modello di applicazione aggiungendo un {{outlet}}helper. Il router Ember renderà il modello appropriato nella presa a seconda del percorso dell'utente. Useremo anche l' {{linkTo}}helper per aggiungere collegamenti di navigazione.
<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>
Fatto!
Un esempio funzionante di questa applicazione è disponibile qui .
Puoi usare questo jsFiddle come punto di partenza per le tue app ember
Prossimi passi...
- Leggi le guide Ember
- Magari compra lo screencast Peepcode
- Poni domande qui su Stack Overflow o in ember IRC
Per riferimento, la mia risposta originale:
La mia domanda è per qualsiasi esperto di Ember.js, e certamente per i rispettivi autori del tutorial: quando dovrei usare i design pattern di un tutorial e quando dell'altro?
Questi due tutorial rappresentano le migliori pratiche al momento in cui sono stati scritti. Di sicuro c'è qualcosa che può essere imparato da ciascuno, entrambi sono tristemente destinati a diventare obsoleti perché ember.js si sta muovendo molto rapidamente. Dei due, quello di Trek è molto più attuale.
Quali componenti di ciascuno sono preferenze personali e quali componenti si riveleranno essenziali man mano che la mia app matura? Se stai sviluppando una nuova applicazione ember, non consiglierei di seguire l'approccio di Code Lab. È semplicemente troppo antiquato per essere utile.
Nel design di Code Lab, Ember sembra essere più vicino all'esistente all'interno dell'applicazione (anche se è al 100% del suo JS personalizzato), mentre l'applicazione di Trek sembra vivere più all'interno di Ember.
Il tuo commento è eccezionale. CodeLab sta sfruttando i componenti principali di Ember e accedendovi da un ambito globale. Quando è stato scritto (9 mesi fa) questo era abbastanza comune, ma oggi le migliori pratiche per scrivere applicazioni ember sono molto più vicine a ciò che Trek stava facendo.
Detto questo, anche il tutorial di Trek sta diventando obsoleto. Componenti necessari ApplicationViewe ApplicationControllerora generati dal framework stesso.
Di gran lunga la risorsa più recente è il set di guide pubblicate su http://emberjs.com/guides/
- sono state scritte da zero nelle ultime settimane e riflettono l'ultima versione (pre-rilascio) di ember.
Vorrei anche controllare il progetto wip di trek qui: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
MODIFICA :
@ sly7_7: Fornirei anche un altro esempio, utilizzando ember-data https://github.com/dgeb/ember_data_example