Your SlideShare is downloading. ×
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,938

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,938
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
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
    • Es un framework basado en JQuery para crear RIA.
  • 2. JavaScriptMVC
    • JavaScript puro
    • 3. document.getElementById("box").style.display = "block";
  • 4. JavaScriptMVC
    • JavaScript con librerías
    • 5. $(”box”).attr(”display ”, ”block”);
    • 6. $(”box”).show();
  • 7. JavaScriptMVC
    • JavaScript con framework
    • 8. jQuery.Controller.extend('BoxController',
    • );
  • 13. JavaScriptMVC
    • Conclusión: No uses JavaScript para mostrar una cajita
  • 14. JavaScriptMVC
    • 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!)
  • 18. JavaScriptMVC
    • ¿Cómo harían esta aplicación?
  • 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. JavaScriptMVC
  • 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()
    • El controlador
  • 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>
    • La vista
  • 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./ , '.' ); } })
    • El modelo
  • 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. 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. JavaScriptMVC
    • Integración con Server Side
  • 27. JavaScriptMVC
    • Follow me @4lb0 / http://albo.me

×