Using the MVC
You didn’t think I’d wrap up this tutorial without showing you how to include it in your own HTML page, did you? Of course not!
<html> <head> <script src="jquery.js" type="text/javascript"></script> <script src="model.js" type="text/javascript"></script> <script src="view.js" type="text/javascript"></script> <script src="controller.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var model = new $.Model(); var view = new $.View($("#console")); var controller = new $.Controller(model, view); }); </script> </head> <body> <div id="console"> </div> </body> </html>
Simply create your model, view and controller on page load – that’s it! All of your application logic should stay neatly tied up inside your Controller, so no ugly script is thrown around your HTML.
What about the Server?
This tutorial focuses primarily on the client side, but let’s take a quick peak at what the server was sending back to the AJAX calls.
<? if(isset($_REQUEST["id"])){ echo "[{ id : 1, name : 'item 1' }]"; }else{ echo "[{ id : 1, name : 'item 1' }, { id : 2, name : 'item 2' }]"; } ?>
The server sends back 1 of 2 JSON responses. If an “id” parameter is sent in with the URL, then only 1 item is sent back. If no “id” parameter is sent in, then 2 items are sent back. This is clearly just a stub server script. In a real application you would need to send back more meaningful data.
Summary
I hope this tutorial has helped you understand how the MVC pattern can apply to client side coding. I’m confident that for AJAX rich web apps, a well architected MVC pattern in JavaScript can hugely optimize data handling and requests to the server – not to mention the benefits in keeping your code clean and separated.
The Source Code
If you’d like to download the source for this tutorial, you can do so here:
Download It Here
Thanks for checking out my first JavaScript tutorial! Check the JQuery MVC Tutorial page for more tutorials with more advanced functionality and code.
You can also browse the tutorials page for completely different tutorials, or check out some of my other projects.
I hope this was helpful – anyone have any ideas for a 2nd tutorial?
- 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
Just to congratulate you on your excellent tutorial! I used to work with smalltalk 10 years ago and had not seen mvc used in javascript at all.
thanks
Neat tutorial. Very helpful. Thanks a lot.
Thank you very much for your useful tutorial. Because I could not install the PHP in my cygwin environment and had to use Perl as cgi as follows. I have passed the test for the scripts in your package with Jquery 1.2.6 but I got error with the latest Jquery 1.4.2 or 1.4.3pre.
Would you help me to solve this puzzle?
Thank you in advance.
Yun
————————————
#!/usr/bin/perl
#require “cgi-lib.pl”;
use CGI;
use JSON;
#$cgi = $0;
$q = new CGI;
$id = $q->param(‘id’);
print $q->header(-charset=>’UTF-8′);
if ($id) {
print “[{ id : 1, name : ‘item 1’ }]”;
}
else{
print “[{ id : 1, name : ‘item 1’ }, { id : 2, name : ‘item 2’ }]”;
}
Hi,
I have solved the issues by referring to Jquery1.4.2 document. Both the strings and properties in the Json data must strictly be expressed with the double quotes. That is to say the single quotes in the cgi response are not allowed after Jquery 1.4.
Yun
This is not MVC. Do some more research and try again. The view does not listen for, or respond to events in MVC. Nor does the controller take center stage. The model does the business logic.
Just thank you.
I was wondering the same questions … so it’s very helpful !
Interesting food for thought.
Though I should mention: your JSON is invalid. JSON requires double quotes around names and string values.
Thank you Adam Its an amazing tutorial, I think you help us all..
simple but great example for learning point of view
Are you still using this pattern? I’m curious considering the explosion of MV* frameworks.
I’m spending most of my time doing native iOS development as opposed to web, but for the few web projects I work on I usually still follow this pattern.
thanks!