JavascriptMVC

3,210 views

Published on

TechTalk de JavaScriptMVC

Published in: Technology
  • Be the first to comment

JavascriptMVC

  1. 1. JavaScriptMVC <ul><li>Es un framework basado en JQuery para crear RIA. </li></ul>
  2. 2. JavaScriptMVC <ul><li>JavaScript puro
  3. 3. document.getElementById(&quot;box&quot;).style.display = &quot;block&quot;; </li></ul>
  4. 4. JavaScriptMVC <ul><li>JavaScript con librerías
  5. 5. $(”box”).attr(”display ”, ”block”);
  6. 6. $(”box”).show(); </li></ul>
  7. 7. JavaScriptMVC <ul><li>JavaScript con framework
  8. 8. jQuery.Controller.extend('BoxController', </li><ul><li>{},
  9. 9. {
  10. 10. init: function (el) {
  11. 11. this._super(el); </li><ul><li>this.element.show(); </li></ul><li>}
  12. 12. } </li></ul><li>); </li></ul>
  13. 13. JavaScriptMVC <ul><li>Conclusión: No uses JavaScript para mostrar una cajita </li></ul>
  14. 14. JavaScriptMVC <ul><li>Un ejemplo: Simple Gallery
  15. 15. Una aplicación donde buscas imagenes en Flickr y las agregas a tu galería donde podes acomodarlas.
  16. 16. Vamos a ver como hacemos lo mismo con y sin JavaScriptMVC
  17. 17. (sin framework pero con JQuery, tampoco tengo tanto tiempo libre che!) </li></ul>
  18. 18. JavaScriptMVC <ul><li>¿Cómo harían esta aplicación? </li></ul>
  19. 19. JavaScriptMVC $( function () { // load $.get( &quot;/server/get.php&quot; , function (images) { for ( var i = 0; i < images.length; i++) { addImageToGallery(images[i]); } }, &quot;json&quot; ); }); function addImageToGallery(data) { var link, img, li; link = $( &quot;<a></a>&quot; ).attr( &quot;href&quot; , data.src.replace( /_m./ , &quot;.&quot; )); img = data; img.alt = img.title; img.src = data.src.replace( /_m./ , &quot;_s.&quot; ); li = $( &quot;<li></li>&quot; ).attr( &quot;id&quot; , &quot;image_item_&quot; + data.id); delete img.id; link.append($( &quot;<img />&quot; ).attr(img)); link.lightBox({eventType: &quot;dblclick&quot; }); li.append(link); $( &quot;#gallery&quot; ).append(li); }
  20. 20. JavaScriptMVC
  21. 21. JavaScriptMVC $ ./js jmvc/generate/controller Gallery /** * @tag controllers, home */ jQuery.Controller.extend( 'GalleryController' , /* @Static */ { }, /* @Prototype */ { init: function (el) { this ._super(el); ImageItem.findAll( this .callback( function (images) { for ( var i = 0; i < images.length; i++) { this .addImage(images[i]); } })); }, addImage: function (image) { this .element.append( this .view( 'image' , {image: image})); } }); // $(”#gallery”).gallery_controller() <ul><li>El controlador </li></ul>
  22. 22. JavaScriptMVC Creamos el archivo /views/gallery/image.ejs <li id=&quot; <%= image.identity() %> &quot;> <a href=&quot; <%= image.getFull() %> &quot; title=&quot; <%= image.title %> &quot;> <img src=&quot; <%= image.getThumb() %> &quot; alt=&quot; <%= image.title %> &quot; /> </a> </li> <ul><li>La vista </li></ul>
  23. 23. JavaScriptMVC $ ./js jmvc/generate/model ImageItem $.Model.extend( 'ImageItem' , /* @Static */ { findAll: function (success) { $.ajax({ url: &quot;/server/get.php&quot; , type: 'get' , success: this .callback([ &quot;wrapMany&quot; , success]), dataType: &quot;json&quot; }); }, }, /* @Prototype */ { getThumb: function () { return this .src.replace( /_m./ , '_s.' ); }, getFull: function () { return this .src.replace( /_m./ , '.' ); } }) <ul><li>El modelo </li></ul>
  24. 24. JavaScriptMVC $( &quot;#search form&quot; ).submit( function (event) { event.preventDefault(); flickrSearch($( this .q).val(), function (items) { var html = &quot;<ul>&quot; ; var item; for ( var i = 0; i < items.length; i++) { item = items[i]; html += &quot;<li title=&quot;Click to add&quot;><img src='&quot; + item.media.m + &quot;' />&quot; ; html += &quot;<p>&quot; + item.title + &quot;</p></li>&quot; ; } html += &quot;</ul>&quot; ; $( &quot;#search_results&quot; ).html(html); $( &quot;#search_results&quot; ).show(); }); return false ; }); $( &quot;#toggle_results&quot; ).click( function () { $( &quot;#search_results&quot; ).toggle(); }); $( &quot;#search_results li&quot; ).live( &quot;click&quot; , function () { var o = { src: $( &quot;img&quot; , this ).attr( &quot;src&quot; ), title: $( &quot;p&quot; , this ).html() }; $.post( &quot;/server/save.php&quot; , o, function (response) { addImageToGallery(response); }, &quot;json&quot; ); $( &quot;#search_results&quot; ).hide(); });
  25. 25. JavaScriptMVC jQuery.Controller.extend( 'SearchController' , {}, { &quot;form submit&quot; : function (el, ev) { ev.preventDefault(); Flickr.search( this .element.find( &quot;input&quot; ).val(), this .callback( &quot;showResults&quot; )); }, showResults: function (results) { var html = this .view( &quot;results&quot; , {results: results}); $( &quot;#search_results&quot; ).html(html).show(); }, &quot;#toggle_results a click&quot; : function (el, ev) { $( &quot;#search_results&quot; ).toggle(); ev.preventDefault(); }, &quot;#search_results li click&quot; : function (el) { var image = new ImageItem({ src: $( &quot;img&quot; , el).attr( &quot;src&quot; ), title: $( &quot;p&quot; , el).html() }); image.save( function (imageModel) { $( &quot;#gallery&quot; ).controller().addImage(imageModel); }); $( &quot;#search_results&quot; ).hide(); } });
  26. 26. JavaScriptMVC <ul><li>Integración con Server Side </li></ul>
  27. 27. JavaScriptMVC <ul><li>Follow me @4lb0 / http://albo.me </li></ul>

×