TechTalk de JavaScriptMVC

3. document.getElementById("box").style.display = "block";

5. $(”box”).attr(”display ”, ”block”);

6. $(”box”).show();

9. {

10. init: function (el) {

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!)

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

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=amp;quot;Click to addamp;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(); } });