Loading Data from the Server
This phase is the foundation for all the other MVC Tutorial phases. In this phase, we’ll create a lightweight Model, View, and Controller from scratch using JQuery. You can read more about the motivation for this tutorial from this post.
Demo
What type of functionality can you expect when you’re done? The demo below shows (1) loading in all or some of the data from the server, (2) getting data from the cache when available instead of AJAX, and (3) ability to clear the cache and/or console and start over.
Architecture
Like any good MVC pattern, our goal will be to keep the Model and View logically separate. All of our application logic will reside inside the Controller. So, where does the AJAX fit in? A simple data flow diagram: View <=> Controller <=> Model <=> Cache <=AJAX=> Server The View will only communicate with the Controller, where all of our application logic resides. The Controller will tell the Model when and what data to load, and then relay that data to the View. The Model will keep a local cache of data, as well as manage the AJAX to and from the server.
The Source Code
You can take a sneak peek at the source code here, or download it and follow along on your own machine. All applicable source code will also be displayed inline as it’s explained later in the tutorial.
First Steps
In the next few pages, I’ll walk you through the code for the Controller, Model, and View, and then lastly we’ll integrate it into a sample HTML page and debrief. So without further ado:
- Page 1: Loading Data from the Server
- Page 2: The View
- Page 3: The Model
- Page 4: The Controller
- Page 5: Summary and Source Code
hi i like the tutorial.
one thing i noticed with the demo inside this page is if the result from “load one” is already cached, “load all” will only retrieve that cached item. should your button say “load cached” instead of “load all”, or do you perhaps have a bug in the code here? the way it’s named now I would expect it to load all (read: 2) items, regardless if one is already cached.
example:
[click clear cache]
clearing data
[click load one]
Fetching Data…
from ajax: item 1
Done.
[click load all]
from cache: 1 items
from cache: item 1
— here —
[click clear cache]
clearing data
[click load all]
Fetching Data…
from ajax: item 1
from ajax: item 2
Done.
true enough,
there are a few ways to write the getAll() function, one would be to just move line 69 to the end of the function. This would mean that the AJAX would always be called, and the cache would be returned from the function call.
Another option, if we knew that we’d only ever have 2 items, we could check if the cache were full and only AJAX if it weren’t.
Later phases will have a more meaningful data model (as opposed to the ever generic “item”), so that things like this will be more clear.
Thanks for the tutorial. I’ve spent about a year using Adobe Flex and Cairngorm MVC patterns. I have an html/javascript project coming up and I was dreading the prospect of going back to a world of round-trip html pages decorated with bits of javascript here and there.
Nice Tutorials!
Thanks for this tutorial, very helpful.
I came from actionscript developpement and discover jQuery
I try to reproduce your organisation and I have a question about view.js class
Why pass $console as argument ?
I tried that and it works : $(“#console”).html() ;
Is it for a more cleaning code ?
thanks again
regards
After more testing, I think I understand, pass the argument is for disconnect view.js and html page
But, how can I call sub element of the console builds in html page ?
exemple, I want to write something like
$console.subDiv.html() ;
Is it possible ?
[code]
<div id="console">
<div id="subDiv">
</div>
</div>
[/code]
JQuery is very powerful !!
Answer to my self, to call sub elements in console builds in html page, do this :
[code]
$("#subDiv", $console).html() ;
[/code]
But, it’s the same ‘problem’, subDiv must exists with this name in html page …
thx, clear code