Terminamos PULS3

Continuando con nuestra app PULS3.

Primero queremos que cada uno de los artículos cuando tenga una vista única se vea con mas información, así que debemos crear un nuevo template.

Copiamos el template que creamos anteriormente y le cambiamos su nombre por ArticleExtended_tpl en donde le agregaremos que muestre la variable content del modelo y como este viene con html puro colocamos nuestra variable de la siguiente forma.

{% autoescape false %}
    {{post.content}}
{% endautoescape %}

En la vista articulo ahora cambiaremos el id del templete de la vista individual por el de la vista completa y cambias la clase por extended y nos renderiza todos nuestros artículos de manera completa.

Ahora debemos trabajar 2 estados de la app en donde primero se verá una vista compacta y luego se verá una vista de artículo individual extendida.

Vamos a router base en donde era el encargado de cambiar nuestro html y funcionaba perfectamente pero ahora debemos cambiarlo por el estado compacto y extendido y así la vista verá como se renderiza.

Colocó dentro de root un 

window.app.state = ‘root’;

Y luego en articleSingle un

window.app.state = ‘articleSingle’;
window.app.article = id;

Y así identificaremos cuando estamos en home y cuando estamos en una vista individual.

Ahora vamos a la vista y ahora escucharemos a mi router en cierta ruta en especial en este caso root y ejecutaremos una función en donde renderiza la vista compacta y luego hacemos lo mismo pero con articleSingle en donde renderiza la vista extendida de un solo modelo.

window.routers.on (‘route:root’,function () {
  self.render();
});
window.routers.on (‘route:articleSingle’,function () {
  self.render();
});

Y agregamos 2 templates:

this.template = swig.compile ($(‘#Article_tpl’).html());
this.templateExtended = swig.compile ($(‘#ArticleExtended_tpl’).html());

Y en render chequeas en que pedazo de la app estas entonces le hace un if al estado de la app y rendereas el template extendido y cualquier cosa que sea lo contrario sera la forma que lo rendereabamos antes.

if (window.app.state === ‘articleSingle’){
  if (window.app.article == this.model.get(‘id’)) {
    this.$el.show();
    this.$el.html( this.templateExtended(locals) );
}else {
  this.$el.hide();
  this.$el.html(‘’);
}
}else{
  this.$el.html( this.template(locals) );
}

Y si vas a tu app esta haciendo el cambio de una forma excelente y tienes manera de informar sobre todo lo que pasa en tu app y así mismo tu app actuará conforme a esto.

Esto causa que tu app trabaje de una forma individual con módulos pequeños y que al volverse una app grande te ayudara mucho.

Esta es la misma filosofía que manejas al momento de agregar un nuevo ítem en donde al crearlo debemos crear una nueva vista que se genera al haber una adición en nuestra colección, ve y pruebas, reta tus conocimientos.

La comunicación entre eventos la manejamos con PonyExpress la cual puedes aprender con el tutorial de una web real time de la clase #5.

Y hemos llegado al final de las clases oficiales y de este gran resumen en donde debes ahora ir y aplicar lo aprendido con la cantidad de lecturas y videos que tienes disponibles, lo importante es que aprendiste a crear una aplicación web y no el típico post y blog que cualquiera te puede enseñar a hacer, esto es Frontend profesional y solo podrás cultivarlo si te propones nuevos proyectos que te reten a implementar lo aprendido y aplicar lo de la teoría.

Repositorio oficial - Descarga .zip