Si hay algun link inapropiado y/o se considera spam pueden editarlo, ya que no son esas mis intenciones. Tutorial de Ember.js Hace bastante que no pasaba por aca, y me decidi en publicar algo que le sirva a la gente, quiero dejar mi granito de arena, para que otros también lo hagan, permitiendo que entre todos podamos enseñar y aprender. De esta manera a la hora de investigar o programar, nos resulte más sencillo hacerlo. Hoy voy a escribir sobre un framework javascript llamado "ember.js", este nos permite crear aplicaciones en tiempo real, sin necesidad de contratar un webhosting costoso, y hasta lo más increible es que lo podes utilizar en tu pc, sin tener que instalar ningun programa. Con solo un navegador web, y un editor de texto ya lo podes hacer... ¿Excelente, no? Las ventajas de utilizar este framework, es que corre bastante rápido al ser escrito en javascript, ya que corre del lado del frontend, esto quiere decir se ejecuta en el mismo navegador quien interpreta javascript, como vos a hablar en tu idioma. En este tutorial mencionaré algunas bibliotecas que podran utilizar en conjunto con esta tecnología web, facilitando el crear una aplicación mucho mas completa. Como última cosa antes de que empezemos, a mi me costó mucho aprender a utilizarla, ya que los tutoriales que uno encuentra aveces no estan del todo completos, o quizas no explican en detalle ciertas cosas que son fundamentales para entender que estamos haciendo, y que queremos lograr. Quiero destacar que esto es normal, ya que es una tecnología relativamente nueva, y existe documentación oficial, pero no siempre basta con sólo eso a la hora de llevarlo a la practica, no..? Recuerden que este tutorial esta escrito con la idea de que ya tengan un previo conocimiento de ember.js, con sólo leer un poco de la documentación oficial y extra oficial seguramente logren entenderlo. De todas maneras, lanzaré una tutorial un más básico, para aquellos que realmente quieren aprender, no desespereis!! Recursos Oficiales: Inspector de Ember en Chrome “Sólo sirve para la última versión” https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi/related Últimos archivos subidos de ember http://builds.emberjs.com.s3.amazonaws.com/ Charlas, Ejemplos http://emberwatch.com/ Conceptos http://www.emberist.com/ Foro: http://discuss.emberjs.com/latest/more Editor recomendado: Sublime Text - Editor muy liviano y completo escrito en python, carga en pocos segundos - Te permite programar de manera eficiente - Posee funcionalidades que optimizan el hecho de escribir código Link: http://www.sublimetext.com/ Bibliotecas recomendadas: jQuery.js - Es requerido y utilizado por muchas bibliotecas de javascript - Crear animaciones diversas de manera sencilla - Se intenta adaptar para todos los navegadores, evitando escribir codigo distinto para cada uno - Se esta integrando a la tecnologia mobile Link: http://jquery.com bootstrap.css - Permite desarrollar el diseño de una aplicación de manera rápida - Crear un estilo rápido a la aplicación sólo con clases - Genera una estructura web en pocos pasos Link: http://getbootstrap.com/ moment.js - Permite formatear una fecha - Convierte una fecha poco legible a una más entendible - Se puede utilizar para aplicaciones con timer Link: http://momentjs.com/ handlebars.js - Permite manejar el contenido de la aplicación desde un sistema de templates Link: http://handlebarsjs.com/ ember-data.js - Permite almacenar y manipular el contenido de la aplicación parsley.js - Permite validar distintos tipos de campos para un formulario - Podes validar solo agregando atributos al campo - No necesitas crear funciones con expresiones regulares Link: http://parsleyjs.org/ En los ejemplos que daremos a conocer utilizaremos las siguientes bibliotecas: jquery.js, handlebars.js, ember.js, ember-data.js Nota: Recomiendo agregarlas en ese orden para evitar conflictos a la hora de ejecutar la aplicación. 1. Como crear un Store 2. Como crear un Model 3. Como agregar datos a un Model 4. Como imprimir contenido en el template como atributo sin que diga // 2° View App.peliculasItemView = Em.View.extend({ templateName: 'peliculas-item', }); // 2° Template // 3° View App.clientesView = Em.View.extend({ templateName: 'cliente', premium: false, didInsertElement: function(){ if(this.get('content').premium== 1) this.set('premium', true); } }); // 3° Template 11. Bindear clases en un template En el archivo de la View App.ProductosView = Ember.View.extend({ producto: null, productoFaltaSeleccionar: false, guardar: function (){ if(this.get(‘producto’) == null) { this.set('productoFaltaSeleccionar', true); } else { this.set('productoFaltaSeleccionar', false); } } }); En el archivo del template
Titulo
Nota 1: Campo > (if) si se cumple uso esta clase > (else) sino se cumple uso esta clase Nota 2: Si el valor del campo pasado es ‘true’ usa la primera clase, sino utiliza la tercera Todo el contenido es de mi autoria. Mi intención es compartir mi conocimiento con los demás, y que otros también se animen a hacerlo. Pido que si colocan lo mismo en otro sitio, den la fuente de donde lo sacaron, osea mi post xD.