Guía de inicio rápido de Ember.js mínimo viable de Mike Grassotti
Esta guía de inicio rápido debería llevarlo de cero a un poco más de cero en un par de minutos. Cuando termine, debe sentirse algo seguro de que ember.js realmente funciona y, con suerte, estará lo suficientemente interesado como para aprender más.
ADVERTENCIA: No intente simplemente esta guía y luego piense que las brasas apestan porque "Podría escribir esa guía de inicio rápido mejor en jQuery o Fortran" o lo que sea. No estoy tratando de venderte brasa ni nada, esta guía es poco más que un hola mundo.
Paso 0: echa un vistazo a jsFiddle
este jsFiddle tiene todo el código de esta respuesta
Paso 1: incluye ember.js y otras bibliotecas necesarias
Ember.js requiere jQuery y Handlebars. Asegúrese de que esas bibliotecas se carguen 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>
Paso 2: describe la interfaz de usuario de tu aplicación usando una o más plantillas de manubrio
Por defecto, ember reemplazará el cuerpo de su página html usando el contenido de una o más plantillas de handlbars. Algún día estas plantillas estarán en archivos .hbs separados ensamblados por sprockets o tal vez grunt.js. Por ahora, mantendremos todo en un archivo y usaremos etiquetas de script.
Primero, agreguemos una sola application
plantilla:
<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>
Paso 3: inicialice su aplicación ember
Simplemente agregue otro bloque de script App = Ember.Application.create({});
para cargar ember.js e inicializar su aplicación.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
Eso es todo lo que necesita para crear una aplicación de brasas básica, pero no es muy interesante.
Paso 4: agrega un controlador
Ember evalúa cada plantilla de manillar en el contexto de un controlador. Entonces la application
plantilla tiene una coincidencia ApplicationController
. Ember crea es automáticamente si no define uno, pero aquí vamos a personalizarlo para agregar una propiedad de mensaje.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Paso 5: definir rutas + más controladores y plantillas
El enrutador Ember facilita la combinación de plantillas / controladores en una aplicación.
<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 que esto funcione, modificamos nuestra plantilla de aplicación agregando un {{outlet}}
ayudante. El enrutador Ember presentará la plantilla adecuada en la salida según la ruta del usuario. También usaremos el {{linkTo}}
ayudante para agregar enlaces de navegación.
<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>
¡Hecho!
Un ejemplo funcional de esta aplicación está disponible aquí .
Puede usar este jsFiddle como punto de partida para sus propias aplicaciones de ascuas
Próximos pasos...
- Leer las guías de Ember
- Tal vez compre el screencast de Peepcode
- Haga preguntas aquí en Stack Overflow o en ember IRC
Como referencia, mi respuesta original:
Mi pregunta es para cualquier experto en Ember.js, y ciertamente para los respectivos autores de los tutoriales: ¿Cuándo debería usar los patrones de diseño de un tutorial y cuándo del otro?
Estos dos tutoriales representan las mejores prácticas en el momento en que se redactaron. Seguro que hay algo que se puede aprender de cada uno, ambos están condenados a quedar desactualizados porque ember.js se está moviendo muy rápido. De los dos, Trek's es mucho más actual.
¿Qué componentes de cada uno son preferencias personales y qué componentes resultarán esenciales a medida que mi aplicación madure? Si está desarrollando una nueva aplicación Ember, no recomendaría seguir el enfoque de Code Lab. Está demasiado desactualizado para ser útil.
En el diseño de Code Lab, Ember parece estar más cerca de existir dentro de la aplicación (a pesar de que es el 100% de su JS personalizado), mientras que la aplicación de Trek parece vivir más dentro de Ember.
Tu comentario es genial. CodeLab está aprovechando los componentes centrales de Ember y accediendo a ellos desde un alcance global. Cuando se escribió (hace 9 meses), esto era bastante común, pero hoy en día las mejores prácticas para escribir aplicaciones de ember están mucho más cerca de lo que estaba haciendo Trek.
Dicho esto, incluso el tutorial de Trek está desactualizado. Componentes que eran necesarios ApplicationView
y que ApplicationController
ahora genera el propio marco.
Con mucho, el recurso más actual es el conjunto de guías publicadas en http://emberjs.com/guides/
; se han escrito desde cero durante las últimas semanas y reflejan la última versión (prelanzamiento) de ember.
También vería el proyecto wip de trek aquí: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
EDITAR :
@ sly7_7: también daría otro ejemplo, usando ember-data https://github.com/dgeb/ember_data_example