JavaScriptMVC 3.0

1. JavaScriptMVC 3.0 For Your Consideration

2. GOALS • Make everything work without everything else • Move Test, Compression, Documentation into another project (can be used w/o jQuery) • Make VC parts close to jQuery.

3. Directory Structure • Organized around a plugin • Can be hierarchical (jupiter/autocomplete) • Designed to enable building and testing self contained plugins then assemble them into a final project. • autocomplete folder – the plugin’s folder. • jmvcfolder – testing, docs, compression • jquery folder – jquery, and jqueryplugins

4. Controller/Plugin • Extendable, but w/o a class system • Events auto attached via event delegation • Setup / teardown • Modify properties • State in ‘this’ • Small footprint – 70 lines $.plugin(‘autocomplete’, { setup : function(el, options){…}, teardown : function(el){…}, “input keypress”: function(el){…}, defaultText : function(newDef){…} }) //create $(“.search”).autocomplete(options); //access properties $(“.search”).autocomplete(“defaultText”, ”type here”); //destroy $(“.search”).autocomplete(“teardown”); //extend $.autocomplete.extend({ … })

5. View • Renders using a JavaScript Template engine. • Multiple Engine Support • Can be compressed into plugin. • “Plugged into” append, prepend, html, text, etc. //draw in results dropdown when creating $.plugin(‘autocomplete’, { setup : function(el, options){ el.append(‘autocomplete/results.ejs’, options); }, … }) //create $(“.search”).autocomplete({loadingText: “loading …”}); //autocomplete/results.ejs <div class=‘dropdown’> <div class=‘loadingText’> <%= loadingText %> </div> <div class=‘results/> </div>

6. FuncUnit Testing • Selenium / QUnit / jQuery syntax hybrid. • Works without selenium • Handles async without stop / start. • More accurately simulates browser events than selenium. • Plugins can add ‘test’ plugins similar to jquery: S.fn.autocomplete = module(“autocomplete") test(“Shows List", function(){ //loads page S.open("test/funcunit/autocomplete.html"); //types jquery aw in input S(“.search input").type(“jquery aw") //gets the text from the first result S(“.result:eq(1)").text(function(text){ equals(test, “jqueryawesomeness”,”it’s awesome”) }) })

7. Drag-drop events • Support drag-drop events through bind and live • Set options on callback parameters or through event data. $(‘.handler’).live( “dragstart”, {distance: 5}, function(ev, drag){ if($(this).text() == “up”){ drag.axis(‘y’) }else{ drag.axis(‘x’) } } }) //Can be done with plugin like: “.handler dragstart({distance: 5})” : function(el, ev, drag) { … }