More Related Content
What's hot (20)
Viewers also liked (8)
JavascriptMVC
- 1. JavaScriptMVC Es un framework basado en JQuery para crear RIA.
- 4. JavaScriptMVC JavaScript con librerías
- 7. JavaScriptMVC JavaScript con framework
- 9. {
- 10. init: function (el) {
- 12. } );
- 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( "/server/get.php" , function (images) { for ( var i = 0; i < images.length; i++) { addImageToGallery(images[i]); } }, "json" ); }); function addImageToGallery(data) { var link, img, li; link = $( "<a></a>" ).attr( "href" , data.src.replace( /_m\./ , "." )); img = data; img.alt = img.title; img.src = data.src.replace( /_m\./ , "_s." ); li = $( "<li></li>" ).attr( "id" , "image_item_" + data.id); delete img.id; link.append($( "<img />" ).attr(img)); link.lightBox({eventType: "dblclick" }); li.append(link); $( "#gallery" ).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=" <%= image.identity() %> "> <a href=" <%= image.getFull() %> " title=" <%= image.title %> "> <img src=" <%= image.getThumb() %> " alt=" <%= image.title %> " /> </a> </li> La vista
- 23. JavaScriptMVC $ ./js jmvc/generate/model ImageItem $.Model.extend( 'ImageItem' , /* @Static */ { findAll: function (success) { $.ajax({ url: "/server/get.php" , type: 'get' , success: this .callback([ "wrapMany" , success]), dataType: "json" }); }, }, /* @Prototype */ { getThumb: function () { return this .src.replace( /_m\./ , '_s.' ); }, getFull: function () { return this .src.replace( /_m\./ , '.' ); } }) El modelo
- 24. JavaScriptMVC $( "#search form" ).submit( function (event) { event.preventDefault(); flickrSearch($( this .q).val(), function (items) { var html = "<ul>" ; var item; for ( var i = 0; i < items.length; i++) { item = items[i]; html += "<li title=\"Click to add\"><img src='" + item.media.m + "' />" ; html += "<p>" + item.title + "</p></li>" ; } html += "</ul>" ; $( "#search_results" ).html(html); $( "#search_results" ).show(); }); return false ; }); $( "#toggle_results" ).click( function () { $( "#search_results" ).toggle(); }); $( "#search_results li" ).live( "click" , function () { var o = { src: $( "img" , this ).attr( "src" ), title: $( "p" , this ).html() }; $.post( "/server/save.php" , o, function (response) { addImageToGallery(response); }, "json" ); $( "#search_results" ).hide(); });
- 25. JavaScriptMVC jQuery.Controller.extend( 'SearchController' , {}, { "form submit" : function (el, ev) { ev.preventDefault(); Flickr.search( this .element.find( "input" ).val(), this .callback( "showResults" )); }, showResults: function (results) { var html = this .view( "results" , {results: results}); $( "#search_results" ).html(html).show(); }, "#toggle_results a click" : function (el, ev) { $( "#search_results" ).toggle(); ev.preventDefault(); }, "#search_results li click" : function (el) { var image = new ImageItem({ src: $( "img" , el).attr( "src" ), title: $( "p" , el).html() }); image.save( function (imageModel) { $( "#gallery" ).controller().addImage(imageModel); }); $( "#search_results" ).hide(); } });
- 26. JavaScriptMVC Integración con Server Side
- 27. JavaScriptMVC Follow me @4lb0 / http://albo.me