usage

Models

Models are just regular ajax routines (maybe...)! jquery-claypool provides some guide lines as to how organize the calls to provide consistent callback routines so asynchronous usage can keep the controller in control. But thats really all, like our stance on View technology, we are Model agnostic, you can use your prefered technology.

jQuery provides everything you need to use ajax to build a Model. You can use you prefered server-side technology, or you can even use jquery-claypool on the server-side. jquery-claypool now has a $.model plugin to allow you to cleanly describe, validate, and serialize your model for ajax on the client and json storage on the cloud.

Models Are Data Access Objects

It's usually via AJAX, AJAH, or AJAJ (x=xml, h=html, j=json(p)). They might use caching strategies, like simple in-memory caching, cookies, or even client-side storage from html 5 or google gears sqlite.

Models Are Smart or Models Are Dumb

It's pretty much up to you. In frameworks like Django, Models actually are very smart, they know how to validate business concerns, cache and do fancy tricks. They can be dumb too though, and the smarts can be implemented in the controller. The decision is yours, and we delegate to you.

options

Use a callback

The simple idea is that regardless of where we get the data, we provide a consistent place to provide a callback so the controller can act as a closure for the model response.

The most common patters are function(args, callback), or my personal favorite is to use jQuery's ajax pattern function(options) where the options include both an error and success function.

examples

Building a Callback Able Model

Let's start by creating a simple closure that will define our model.

/*
 * @file app/models/hello.js
 * @description You can feel free to use your 
 *     own writing style, we are providing an
 *     example not a rigid requirement of how to
 *     you have to write data access objects.  If you 
 *     want to take advantage of the mvc scanners
 *     (and keep the global scope clean) you should
 *     use a closure and single top-level namespace.
 *     In this example we use 'MyApp'
 */
(function($, $M){
    
    var cache;
    
    $M.Hello = function(options){
        cache = {};
        $.extend(true, this, options);
    };

    $.extend($M.Hello.prototype, {
        get: function(id, callback){
           //model retrieval and callback logic here
        }
    });
    
})(jQuery, MyApp.Models);

This is a good lazy model because it doesn't actively do anything when the anonymous closure is executed other than define itself.

A Presumptuous Model

Lets start using this mvc thing a little but keep it real simple.

get: function(id, callback){
    if(callback && $.isFunction(callback)){
        callback({
            animal:'this is a pig'
        });
    }
}

Wow! That was amazing! But very presumptuous, because I would have wanted to hear a cow...

A Thoughtful Model

Lets dive in.

get: function(id, callback){
    if(cache[id]){
       callback(cache[id]);
    }else {
        $.ajax({
           type:'GET',
           dataType:'json',
           url: id,
           success:function(animal){
               cache[id]=animal;
               callback(animal);
           },
           error: function(xhr, status, e){
               callback({
                   animal:'failed to load animal: '+id
               });
           }
        })
    }
}