Your SlideShare is downloading. ×
0
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
JavascriptMVC
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavascriptMVC

2,955

Published on

TechTalk de JavaScriptMVC

TechTalk de JavaScriptMVC

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,955
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×