post thumbnail

Ember.js desde Cero: Controlador

Publicado Por: Carlos Picca, El 11/12/2013


Detalles del Curso:

Dificultad: Aprendiz

Duración: 15 min


Bienvenidos Ember.js desde Cero, curso en el cual aprendemos a programar sin conocimiento alguno. En el capítulo anterior, aprendimos a crear nuestro primer modelo. Si eres nuevo en este curso, te recomiendo que le eches un vistazo al capítulo anterior para que te pongas en contexto (Capítulo 8 - Modelos)

Hoy, vamos a aprender a crear nuestro primer controlador en Ember.js.

¡Alerta!

Todos los ejemplos usados en el tutorial de son una continuación de los ejemplos del capitulo anterior.

¿Cómo creo un controlador en Ember.js?

Lo primero que necesitamos hacer para crear un controlador en Ember.js es definir que tipo de data vamos a extraer de nuestro modelo, ya que puede ser una colección de objetos como puede ser un solo objeto el que vamos a extraer. Veamos los dos tipos:

Representar múltiples objetos

Para representar múltiples objetos lo que tenemos que hacer es:

Primero crear el controlador asociado al modelo que queremos controlar en nuestro caso como estamos usando el ejemplo de capítulos anteriores vamos a crear el archivo marcapaginas_controller.js dentro de la carpeta controllers de nuestra app.

Una vez que hayamos creado el archivo agregamos el siguiente código:

 App.MarcapaginasController = Ember.ArrayController.extend();

Observemos que lo que estamos haciendo es declarar dentro de nuestro app un controlador denominado Marcapaginas, el cual extiende de Ember.ArrayController, y nos va renderizar todos los objetos tipos marcapagina que tengamos disponibles dentro de nuestro modelo en una vista (No te preocupes, las vistas las vamos a ver mas adelante y así podrás entender los controladores en su totalidad).

Cabe destacar que dentro del extend() podemos declara propiedades, métodos y aciones que nos ayuden a controlar nuestras vistas (Indagaremos mas adelante sobre los tipos de acciones que podemos usar en Ember.js).

Lo siguiente que tenemos que hacer es declarar un recurso o resource dentro de nuestro archivo router.js el cual nos lleve a este controller. Veamos como hacerlo:

En el archivo router.js agregamos la siguiente linea:

this.resource(marcapaginas);

Si no sabes como o manejar recursos te recomiendo que le eches un vistazo a Router.

Por último, debemos incluir la referencia de nuestro controlador en el archivo index.html.

Agreguemos lo siguiente dentro de los <head> tags:

<script src=“js/app/controllers/marcapaginas_controller.js”></script>

Representar un solo objeto

Para representar un solo objeto lo que tenemos que hacer es:

Primero crear el controlador asociado al modelo que queremos controlar en nuestro caso como estamos usando el ejemplo de capítulos anteriores vamos a crear el archivo marcapagina_controller.js dentro de la carpeta controllers de nuestra app.

Una vez que hayamos creado el archivo agregamos el siguiente código:

App.MarcapaginaController = Ember.ObjectController.extend();

Observemos que lo que estamos haciendo es declarar dentro de nuestro app un controlador denominado Marcapagina, el cual extiende de Ember.ObjectController, y nos va renderizar el objeto de tipo marcapagina (No te preocupes, las vistas las vamos a ver mas adelante y así podrás entender los controladores en su totalidad).

Cabe destacar que dentro del extend() podemos declara propiedades, métodos y aciones que nos ayuden a controlar nuestras vistas (Indagaremos mas adelante sobre los tipos de acciones que podemos usar en Ember.js).

Lo siguiente que tenemos que hacer es declarar un recurso o resource dentro de nuestro archivo router.js el cual nos lleve a este controller. Veamos como hacerlo:

En el archivo router.js agregamos la siguiente linea:

this.resource(marcapagina, {path: /marcapaginas/:marcapagina_id});

Observemos que hemos añadido la propiedad path, esta es usada para que cada vez que llamemos al recurso marcapagina nos redireccione a la url que nosotros queramos, en este caso necesitamos que “/marcapaginas/:marcapagina_id”. El porque de hacer esto, es para mantener lo mayor posible el estilo REST dentro de nuestra app.

Si no sabes como o manejar recursos te recomiendo que le eches un vistazo a Router.

Por último, debemos incluir la referencia de nuestro controlador en el archivo index.html.

Agreguemos lo siguiente dentro de los<head> tags:

<script src=“js/app/controllers/marcapagina_controller.js”></script>

¡Hasta que nos veamos las vistas no vamos a poder probar la app en su totalidad por lo que los invito a esperar la salida de los siguientes tutoriales!

El código de estos ejemplos estada disponible en el repositorio una vez terminado esta parte (controlador/vista/modelo/templates) de la series.


Conclusión

En esta lección, aprendimos a crear nuestro primer controlador en Ember.js. Si tienes alguna pregunta, yo estaré feliz de responderte en los comentarios, además espero que te unas y le eches un vistazo a todo el resto de este curso.

¡Te espero la próxima semana!


¿Te ha gustado esta publicación?

Compártela:

Por Carlos Picca

Conoce más sobre este autor aquí


comments powered by Disqus