Ember.js desde Cero: Modelos

---

¿Cómo creo un modelo en Ember.js?
Lo primero que necesitamos hacer para crear un modelo en Ember.js es generar una variable de tipo Store la cual va a almacenar toda nuestra data o información de manera persistente durante la aplicación. Para esto vamos a necesitar descargar una librería la cual nos va a permitir poseer data persistente. Vemos como hacerlo:

Naveguemos a Ember Data y descarguemos la ultima version del archivo ember-data.js. Una vez que lo hayamos descargado debemos moverlo a la carpeta libs dentro de nuestra aplicación y asociarlo en el archivo index.html de la app agregando la siguiente linea:

<script src="js/libs/ember-data.js"></script>

1   <script src="js/libs/ember-data.js"></script>

Luego debemos definir el store dentro del archivo app.js de nuestra aplicación. Veamos como hacerlo:

Agregamos el siguiente código:

App.Store = DS.Store.extend({ revision: 11, adapter: "DS.FixtureAdapter" });

1234 AppStore=DSStoreextend({  revision:11,  adapter:"DS.FixtureAdapter"});

Observemos lo siguiente:

• Con App.Store = DS.Store.extend generamos la variable store con la que la app va estar trabajando. Esta extiende de Ember Data.
• Debemos estar pendiente de la versión que queremos usar en mis caso y para el tiempo de este tutorial es la revision: 11.
• Por último debemos especificar el tipo de adaptador que nuestra app va usar en nuestro caso vamos a usar DS.FixtureAdapter, el cual nos permite generar data o información a través de arrays dentro de nuestro modelo. También exige otro adaptador denominado DS.RESTAdapter el cual vamos a usar cuando nuestra app pase a producción. Este posee un comportamiento al estilo REST (Este punto lo veremos mas adelante cuando creemos una app desde cero).

El archivo app.js debería lucir así:

window.App = Ember.Application.create(); App.Store = DS.Store.extend({ revision: 11, adapter: "DS.FixtureAdapter" });

123456 windowApp=EmberApplicationcreate(); AppStore=DSStoreextend({  revision:11,  adapter:"DS.FixtureAdapter"});

Una vez que ya hemos creado nuestra variable store es hora de generar nuestro modelo. En mi opinión cada modelo de Ember.js debería ser manejado por un archivo diferente, es por esto que si seguimos el ejemplo que veníamos usando hasta el tutorial anterior debemos crear un modelo denominado marcapagina.

El archivo del modelo debe estar denominado con el nombre del modelo, es por eso que en nuestro caso vamos a crear marcapagina.js dentro de la carpeta /models de nuestra aplicación. Si nos sabes como estructurar un proyecto en Ember.js te recomiendo visitar Estructura de proyecto.

Una vez que hayamos creado nuestro archivo debemos definir el modelo como tal para eso vamos a agregar el siguiente código:

App.Marcapagina = DS.Model.extend({ nombre: DS.attr('string'), url: DS.attr('string') });

1234 AppMarcapagina=DSModelextend({  nombre:DSattr('string'),  url:DSattr('string')});

Observemos que con App.Marcapagina = DS.Model.extend creamos una variable Marcapagina dentro de nuestra app la cual va a ser un modelo ya que extiende de DS.Model.

Aparte, le agregamos dos atributos el primero un nombre el cual va a ser de tipo string (nombre: DS.attr('string')) y el segundo url que va ser de tipo string (url: DS.attr('string')).

Es importante destacar que Ember.js te permite tener 4 tipos de datos para atributos: string o cadena de caracteres, date o fecha, number o numero y boolean o booleano.

Con esto hemos creado nuestro primer modelo en Ember.js pero para que el modelo funcione o posee información debemos proveerle alguna. En nuestro caso como esto una app de prueba y estamos usando el adaptador del store en modo fijo debemos proveerle un arras para que nuestro modelo se nutra del mismo. Vemos como:

En el mismo archivo vamos a agregar lo siguiente:

App.Marcapagina.FIXTURES = [ { id: 1, nombre: "Codehero", url: "http://codehero.co" }, { id: 2, nombre: "Twitter de Carlos Picca", url: "https://twitter.com/CarlosPicca" } ];

123456789101112 AppMarcapaginaFIXTURES=[  {  id:1,  nombre:"Codehero",  url:"http://codehero.co"  },  {  id:2,  nombre:"Twitter de Carlos Picca",  url:"https://twitter.com/CarlosPicca"  }];

Observemos que debemos decir que modelo vamos a llenar con App.Marcapagina.FIXTURES.
Por ultimo necesitamos identificar que atributo posee que información en cada ítem del arreglo, es decir, por ejemplo: el id del primer ítem es el 1.

El archivo marcapagina.js debería lucir así:

App.Marcapagina = DS.Model.extend({ nombre: DS.attr('string'), url: DS.attr('string') }); App.Marcapagina.FIXTURES = [ { id: 1, nombre: "Codehero", url: "http://codehero.co" }, { id: 2, nombre: "Twitter de Carlos Picca", url: "https://twitter.com/CarlosPicca" } ];

1234567891011121314151617 AppMarcapagina=DSModelextend({  nombre:DSattr('string'),  url:DSattr('string')}); AppMarcapaginaFIXTURES=[  {  id:1,  nombre:"Codehero",  url:"http://codehero.co"  },  {  id:2,  nombre:"Twitter de Carlos Picca",  url:"https://twitter.com/CarlosPicca"  }];

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

---

Conclusión

En esta lección, aprendimos a crear nuestro primer modelo 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!