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.
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.
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.
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.
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.
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...
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!