Skip to content

Instantly share code, notes, and snippets.

View jquerytab.html
<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>
View TemplatedEventBinding.md

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.

View Tabs demo
steal.plugins('jquery').then(function($){
var getPanel = function(li){
var href = $(li).find("a").attr("href");
return $(href);
}
$.fn.tabs = function(){
this.find("li")
View JavaScriptMVC Getting Started Again.md

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.

@jupiterjs
jupiterjs / problems.md
Created Jun 8, 2011
Problems JavaScriptMVC Solves
View problems.md

Class

Tricky problems with prototypal inheritance.

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

Dog = function(){}
Dog.prototype = new Animal()
@jupiterjs
jupiterjs / FuncUnit.md
Created May 28, 2011
FuncUnit article
View FuncUnit.md

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
@jupiterjs
jupiterjs / $.View.md
Created May 27, 2011
$.View for Alex MacCaw's Book
View $.View.md

$.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
@jupiterjs
jupiterjs / $.Controller.md
Created May 27, 2011
$.Controller for Alex MacCaw's Book
View $.Controller.md

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:

@jupiterjs
jupiterjs / JavaScriptMVC.md
Created May 24, 2011 — forked from moschel/JavaScriptMVC.md
JavaScriptMVC Overview
View JavaScriptMVC.md

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:

View gist:987358

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.

You can’t perform that action at this time.