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 plugins folder. jmvc folder – testing, docs, compression jquery folder – jquery, and jquery plugins

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

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, jquery awesomeness,its 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) { … }