You may have heard about the JavaScriptMVC library (it received quite a bit of press because of it is compression capabilities) and may have thought about using it, but haven played with it yet. Well, I have been looking at the library and have found a few tutorials very useful.
If you haven downloaded the library you will want to do it before starting working on the tutorials (You can download the library here).
The first tutorial you should read is the getting started tutorial. This tutorial covers the basics of including the JavaScript files and the plug-in files.
Below is an excerpt from the getting started tutorial.
Including plugins and JavaScripts
All JavaScriptMVC functionality comes in the form of a plugin. We will include the Controller plugin, which organizes your event handlers.
Replace myapp.html with the following HTML. Note the numbered comments, which are explained after the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head></head>
<body>
<script type= ext/javascript src=jmvc/include.js></script>
<script type= ext/javascript>
include.plugins(controller);
include( amyscript);
</script>
</body>
</html>
1. Creates a script tag where we will include a plugin and a script.
2. Loads the Controller plugin.
3. Loads myscript.js, a file we will create in the next section.
The next tutorial that I would recommend reading is the controller tutorial. The tutorial goes over the syntax that is required to use the controller.
Below is an excerpt from the controller tutorial.
Main Controller
If you want to respond to events like:
* the page being loaded
* the page being unloaded
* the page being resized
* the page being scrolled
you create a special main controller by naming it amain. The main controller listens for events on the window, document, and body.
$MVC.Controller( amain,{
// the window onload event handler
load: function(){
alert(page loaded);
},
// the window resize event handler
resize: function(){
alert(page resized);
}
});
The next tutorial that I would read is the view tutorial. This tutorial gives an overview of how the view functionality is accomplished including the use of templates.
Create a Template
The first step towards cleaner code is separating your presentation markup (HTML) from your application logic (JavaScript). We will do this by separating our presentation markup into a separate file called a template. Create a file called cleaning.ejs and insert the following code:
<h1><%= title %></h1>
<ul>
<% for(var i=0; i<supplies.length; i++) { %>
<li>
<a href= isupplies/<%= supplies[i] %>>
<%= supplies[i] %>
</a>
</li>
<% } %>
</ul>
You will notice everything inside <% %> tags is
executed and everything inside <%= %> tags inserts itself into the returned HTML string.
We need to add JavaScript to control the loading and rendering of the template.
We will replace the original string concatenation code with the following:
// load the template file, then render it with data
var html = new View({url: cleaning.ejs}).render(data);
Doesn that feel better? The template code restores HTML to its intended structure and the JavaScript code is short and unambiguous.
The dust is clear, now its time to mop.
It is good to see a library try to bring some form of the Model View Controller design patter to JavaScript. If you use this library for any of your projects I would love to hear about them (as usual you can leave them in the comments or write a blog post about it using your free Ajaxonomy account).
Related Stuff
-
MooV: Using cutting edge Video phones and Software Video Phones - coupling all that with VoIP and empowering the disabled.
-
Moo Telecom: VoIP communications made easy - Ring anyway with the fun and ease of using a normal phone
-
TagR:Mobile Social Network with Real Time Locations Based services, and Ambience Intelligence, VoiP, IM, Skype, Googletalk, Mapping, Flickr, Events, Calendaring, Scheduling, SecondLife Support
-
ClearSMS : ClearSMS is a Web-based application that lets you send bulk SMS messages to your customers, contacts, or just about anyone.
-
Jajah:jah is a VoIP (Voice over IP) provider, founded by Austrians Roman Scharf and Daniel Mattes in 2005[1]. The Jajah headquarters are located in Mountain View, CA, USA, and Luxembourg. Jajah maintains a development centre in Israel.
-
Skype: It’s free to download and free to call other people on Skype. Skype the number one voice over ip software
- PrivatePhone: a free local phone number with voicemail and messages you can check online or from any phone.
Be the first ... |Add your comment.
Your Comment ...
Name (required)
Email (required, hidden)
Website