Documentation

Plugins/Claypool/Models

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Plugins/Claypool

Models

Models are just regular ajax routines (maybe...)! The only difference is that 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. jQuery provides everything you need to use ajax to build a Model, but you should also check out projects like jstorm, jquery-couchdb, exist, sqlite, and services like amazon sss.

Models Are Wanderers

It's true, they hardly ever stay at home. When they go out it's usually via AJAX, AJAH, or AJAJ (x=xml, h=html, j=json(p)). They might use caching strategies, like simple in-memory, 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.

callback

The title say's it well, but 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.

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){
    
    $M.Hello = function(options){
        $.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
                   });
               }
            })
        }
    }
    

OMG! How jquery-ish! indeed. To learn more just dive in!