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.

The following is a VERY rough draft of an article I am working on for Alex MacCaw's @maccman's Book. It is very rough, but even now a worthwhile read. Suggestions / comments are very welcome! Please help me :-)

Introduction

JavaScriptMVC (JMVC) is an open-source jQuery-based JavaScript framework. It is nearly a comprehensive (holistic) front-end development framework, packaging utilities for testing, dependency management, documentation, and a host of useful jQuery plugins.

Yet every part of JavaScriptMVC can be used without every other part, making the library lightweight. Its Class, Model, View, and Controller combined are only 7k minified and compressed, yet even they can be used independently. JavaScriptMVC's independence lets you start small and scale to meet the challenges of the most complex applications on the web.

This chapter covers only JavaScriptMVC's $.Class, $.Model, $.View, and $.Controller. The following describes each component:

TODOS:

show .models() method and hookup

$.Controller - jQuery plugin factory

JavaScriptMVC's controllers are many things. They are a jQuery plugin factory. They can be used as a traditional view, making pagination widgets and grid controls. Or, they can be used as a traditional controller, initializing and controllers and hooking them up to models. Mostly, controller's are a really great way of organizing your application's code.

Controllers provide a number of handy features such as:

$.View - Client Side Templates

JavaScriptMVC's views are really just client side templates. Client side templates take data and return a string. Typically, the strings are HTML intended to be inserted into the DOM.

$.View is a templating interface that takes care of complexities using templates:

Convenient and uniform syntax
Template loading from html elements or external files
Synchronous or asynchronous template loading
Template preloading

FuncUnit

Testing is an often overlooked part of front end development. Most functional testing solutions are hard to set up, expensive, use a difficult (non JavaScript) API, are too hard to debug, and are don't accurately simulate events. FuncUnit, JavaScriptMVC's testing solution, is designed to solve all these problems. No setup, firebug debugging, a jQuery-like API, and the most accurate possible event simulation make FuncUnit a comprehensive testing solution.

Overview

FuncUnit is a collection of several components:

jQuery - for querying elements and testing their conditions
QUnit - jQuery's unit test framework for setting up tests

Class

Tricky problems with prototypal inheritance.

Animal = function(){
  this.offspring = [];
};

Dog = function(){}

Dog.prototype = new Animal()

Welcome to the getting started guide! This getting started guide walks you through creating a simple cookbook app that uses all core parts of JavaScriptMVC. It's purpose is to give you a high level overview of JavaScriptMVC's functionality.

Breakdown

JavaScriptMVC is divided into 4 independent sub projects:

jQueryMX - jQuery MVC and other extensions. StealJS - Dependency Managment and build tool system.

Templated Event Binding

Forgetting to unbind event handlers is the easiest way to create memory leaks. This is an extremely common problem that typically requires a lot of boilerplate unbinding to solve. JavaScriptMVC 3.1's $.Controller now supports templated event binding, making it event easier to create widgets that clean themselves automatically.

Automatic Cleaning

Before we discuss the problem of unbinding event handlers, how jQuery addresses it, and how $.Controller makes it almost impossible to write leaking code, it's worth reviewing part of what makes a perfect plugin (widget).

A perfect widget is many things, extendable, deterministic, etc. But critically for this article, no matter how you use it, it is memory leak free.

	steal.plugins('jquery').then(function($){

	var getPanel = function(li){
	var href = $(li).find("a").attr("href");
	return $(href);
	}

	$.fn.tabs = function(){

	this.find("li")

	<html>
	<body>
	<ul id='tabs'>
	<li><a href='#starcraft'>Starcraft</a></li>
	<li><a href='#rua'>Robot Unicorn Attack</a></li>
	<li><a href='#fallout'>Fallout</a></li>
	</ul>
	<div id='starcraft'>Info about starcraft</div>
	<div id='rua'>Info about Robot unicorn attack</div>
	<div id='fallout'>Info about Fallout</div>