jupiterjs

jQuery Resize Event

When building web applications, it can be tricky to get pages to layout correctly, especially when layout can't be done with CSS. Widgets that can dynamically change the layout only complicate matters. JavaScriptMVC 3.1 packs a new resize event that greatly simplifies these layouts.

• Download
• Documentation

jupiterjs

(function(){
	var getObject = function(name){
		var parts = name.split('.'),
			current = window,
			part;
		while(part = parts.shift()){
			current = current[part];
		}
		return current;
	},

jupiterjs

you can steal all your scripts:

steal.plugins('foo/bar','abc')

then run the build app:

steal buildjs mypage.html

It finds all scripts, minifies, combines them into 1.

jupiterjs

Goal

Train people on a complete stack outside of jQuery

Highlevel concepts

• Dependency Management
• Documentation
• Error Reporting
• Organization

jupiterjs

// The GOAL =========================

// 1. define a model 
$.Model("Todo",{
  findOne : function(params, success, error){
     //some deferred gets returned here
  }
},{
  helperMethod : function(){ ... }
})

jupiterjs

steal.plugins('jquery').then(function(){
	
	var animationNum = 0,
		//Animation events implies animations right?
		suportsAnimations = !!window.WebKitAnimationEvent;
	
	//gets teh last stylesheet or creates one
	var getLastStyleSheet = function(){
		if(!document.styleSheets.length){
			var style = document.createElement('style');

jupiterjs

Event Oriented Architectures

When building JavaScript widgets, they should communicate with "outside" code similar to how native elements, especially form elements work. For example:

The anchor element.

Default Event: window.location = el.href Prevent Default : $(el).click(function(ev){ev.preventDefault()})

jupiterjs

// a helper for retrieving JSON data from localStorage
var localStore = function(name, cb, self){
	var data = $.evalJSON( window.localStorage[name] || (window.localStorage[name] = "{}") ),
		res = cb.call(self, data);
	if(res !== false){
		window.localStorage[name] = $.toJSON(data);
	}
};

// A todo model for CRUDing todos.

jupiterjs

/*
 Tie lets you cross-bind form elements and controllers with models.  
 This means that by changing a model attribute, you it will
         automatically update controllers or form elements.
 This also means that if a 'change' event happens on the
         element, it will automatically update the model attribute.

 Lets see an example:
 */

jupiterjs

//- CONTROLLER -

$.Controller("Tabs",{
  "li click" : function(){

  }
})

// will automatically create a jQuery plugin like: