Bienvenidos Ember.js desde Cero, curso en el cual aprendemos a programar sin conocimiento alguno. En el capítulo anterior, te enseñe todo lo relacionado con las clases y los objetos dentro de Ember.js. 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 2 – Clases y Objetos)
Hoy, vamos a aprender todo lo relacionado con las propiedades computadas dentro de Ember.js.
¿Qué es una propiedad computada?
En pocas palabras, las propiedades computadas permiten declarar funciones como propiedades. Es súper útil para crear nuevos valores dado una o más propiedades normales de una clase.
¿Cómo usarlas?
Sencillo, lo que tenemos que hacer es lo siguiente:
Primero debemos crear un método dentro de la declaración de la clase el cual posea las siguientes características:
- Debe retornar un valor que genere nuevo contenido.
- Debe estar seguido de la palabra clave
property. - La palabra clave
propertydebe incluir entre paréntesis los atributos de los cuales esa propiedad va a depender.
Siguiendo el ejemplo anterior, veamos como crear una propiedad computada que genere un link de un marcapagina. Estamos usando el ejemplo del capitulo anterior por lo que te recomiendo que le definición un vistazo LINK
Antes que nada debemos agregamos la siguiente definición dentro de la clase Marcapagina:
,link: function() {
return this.convertir_en_link();
}.property("nombre", "url")
Observemos que una vez que declaramos una propiedad dentro de una clase, esta va a estar disponible para todas sus instancias.
El archivo index.html debería lucir así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Aprendamos Ember.js en Codehero!</title>
<script src="jquery.min.js"></script>
<script src="handlebars.js"></script>
<script src="ember.js"></script>
<script>
window.App = Ember.Application.create();
var Marcapagina = Ember.Object.extend({
convertir_en_link: function() {
return "<a href='" + this.get("url") + "'>"
+ this.get("nombre")
+ "</a>";
}
,link: function() {
return this.convertir_en_link();
}.property("nombre", "url")
});
var marcapagina = Marcapagina.create({ nombre: "Codehero", url: "http://codehero.co"});
</script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
<h1>Bienvenido a Ember.js!</h1>
</script>
</body>
</html>
Ahora probemos esta nueva propiedad que hemos creado, para eso debemos abrir el explorador de nuestra preferencia y navegar hasta el archivo index.html.
Una vez que haya cargado la pagina iniciamos la consola y tipeamos lo siguiente:
marcapagina.get("link")
Obtendríamos lo siguiente:
Observemos que nos devuelve la propiedad computada con los valores adecuados al nombre y url de la instancia
marcapagina.Recuerda que para obtener el valor de una propiedad en Ember.js debemos usar el método get().
Diferencia entre propiedad y propiedad computada
La diferencia es que una propiedad es un atributo que va a poseer una instancia de una clase y no necesita depender de otros para ser procesado. Y una propiedad computada es un método que devuelve un nuevo conjunto de información generada con la ayuda de los atributos de la clase.
Para hacerlo mas sencillo, veamos un ejemplo:
Si queremos acceder al nombre de la instancia marcapagina, lo único que tuviéramos que hacer es lo siguiente:
Tipear en la consola del explorador:
marcapagina.nombre
Obtendríamos lo siguiente:
Observemos que podemos acceder directamente a esa propiedad ya que es un atributo propio de la instancia
marcapagina, el cual es un objeto de la claseMarcapagina.
Ahora si queremos acceder a la propiedad link de la instancia marcapagina no vamos a poder hacerlo como la obtuvimos anteriormente. Veamos porque:
Si tipeamos en la consola del explorador:
marcapagina.link
Obtendríamos lo siguiente:
Observemos que nos retorna
undefinedporque esa propiedad necesita ser computada y para que esta sea procesada necesitamos acceder a ella a través del método get() que proveen todas las clases dentro de Ember.js.
Actualizaciones Dinámicas
No te preocupes si todavía estas confundido tratando de entender el comportamiento de una propiedad computada. La manera mas fácil de comprenderlo es echándole un vistazo a la parte dinámica de este tipo de propiedades.
¿Qué quiere decir esto?
Las propiedades calculadas, por defecto, observan los cambios realizados en las propiedades de las cuales dependen y se actualizan dinámicamente cuando se les llama. Veamos como ejecutar un cambio dinámico:
Primero verifiquemos que nos devuelve la propiedad link cuando accedemos a ella. En el explorador tipea lo siguiente:
marcapagina.get("link")
Deberíamos obtener lo siguiente:
Ahora cambiemos el nombre de la instancia marcapagina por Carlos. Para eso solo basta con tipear lo siguiente:
marcapagina.set("nombre", "Carlos")
Obtendríamos:
Observemos que para guardar un nuevo valor de un atributo debemos usar el método set() que trae por defecto Ember.js.
Ahora si volvemos a consultar la propiedad link:
marcapagina.get("link")
Obtendríamos:
Como podemos observar ahora el link ha cambiado su nombre de Codehero a Carlos.
Propiedades computadas anidadas
Por último vamos a ver como podemos anidar propiedades computadas. Ember.js nos permite usar propiedades computadas dentro de una nueva declaración de una propiedad computada. Observemos el siguiente ejemplo:
Supongamos que ahora queremos realizar una propiedad que nos permita imprimir el detalle de un marcapagina en particular. Como particularidad uno de los campos que debemos mostrar en el detalle es el link completo del marcapagina. Veamos como hacerlo:
Lo primero que tenemos que hacer es agregar a la definición de la clase Marcapagina la siguiente propiedad computada:
,detalle: function() {
return 'Link: ' + this.get('link') + '; Nombre: ' + this.get('nombre') + '; Url: ' + this.get('url');
}.property('link', 'nombre', 'url')
Observemos que
this.get('link')realiza un llamado a la propiedad computadalink, para así poder mostrar el link en html completo.
El archivo index.html debería lucir así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Aprendamos Ember.js en Codehero!</title>
<script src="jquery.min.js"></script>
<script src="handlebars.js"></script>
<script src="ember.js"></script>
<script>
window.App = Ember.Application.create();
var Marcapagina = Ember.Object.extend({
convertir_en_link: function() {
return "<a href='" + this.get("url") + "'>"
+ this.get("nombre")
+ "</a>";
}
,link: function() {
return this.convertir_en_link();
}.property("nombre", "url")
,detalle: function() {
return 'Link: ' + this.get('link') + '; Nombre: ' + this.get('nombre') + '; Url: ' + this.get('url');
}.property('link', 'nombre', 'url')
});
var marcapagina = Marcapagina.create({ nombre: "Codehero", url: "http://codehero.co"});
</script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
<h1>Bienvenido a Ember.js!</h1>
</script>
</body>
</html>
Si lo probamos en el explorador y tipeamos lo siguiente:
marcapagina.get("detalle")
Obtendríamos:
Como pueden observar hemos creado una propiedad computada anida ya que la propiedad
detalleusa a la propiedadlink.
Si quieres echarle un vistazo a la documentación oficial de propiedades computadas te invito a que visites Ember.js propiedades computadas.
No te preocupes si quedaste confundido con las propiedades computadas, cuando veamos como usar los templates o plantillas dentro de Ember.js verás que nos facilitaran mucho la programación de las vistas.
Conclusión
En esta lección, vimos todo lo relacionado con las propiedades computadas dentro de 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