¡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();1 AppMarcapaginasController=EmberArrayControllerextend();
Observemos que lo que estamos haciendo es declarar dentro de nuestro app un controlador denominado
Marcapaginas, el cual extiende deEmber.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:
1 thisresource(“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:
1 <script src=“js/app/controllers/marcapaginas_controllerjs”></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();1 AppMarcapaginaController=EmberObjectControllerextend();
Observemos que lo que estamos haciendo es declarar dentro de nuestro app un controlador denominado
Marcapagina, el cual extiende deEmber.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:
1 thisresource(“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:
1 <script src=“js/app/controllers/marcapagina_controllerjs”></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!
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure