JavaScriptMVC 3.0

For Your Consideration

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.

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.

• jmvc folder – testing, docs, compression

• jquery folder – jquery, and jquery plugins

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({ … })

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>

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”,”it’s

awesome”) })

})

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) { … }