(Adjusted for Release 3.2)
One problem with the cookbook application is that the recipe controller is attached to the document element. (This is achieved by setting the onDocument attribute to true in the static section of the Recipe controller). Normally you would like to attach your controllers to lower level elements, such as DIVs or FORMs.
As I personally like to have another folder structure than the one created by the js jquery/generate/app code generator, I will create the application manually.
Controller and other names
One thing a newbie must be aware of is the underscore() function, converting for example OneTwo to one_two. This function seems to be applied at least by code generators, producing unexpected results.
Example: If you choose to use the name MyRecipe when you are “scaffolding” the cookbook (js jquery\generate\scaffold Cookbook.Models.MyRecipe), the resulting controller file will be my_recipe_controller.js. Inside that file the created controller will be named Cookbook.Controllers.MyRecipe. If you later would want to rename MyRecipe to something else, you will have a problem.
I will therefore avoid CamelCase and use underscore to separate elements of names, until I understand better how the underscore function is applied in the framework. The only exception is the project folder, which I will call mvcForNewbies1 (as I have detected no problems with that, yet 
).
Create a project folder
My application will start very simple, with just one DIV element with some text, and a button. The div will have the Id my_first_div (note the absence of CamelCase).
Create the project folder in the javascriptmvc installation folder, in my case it will be javascriptmvc/mvcForNewbies.
Create your start page
… in the project folder, loading the steal.js script, and the project “top” script, mvcForNewbies.js. I will name my startpage mvcForNewbies.html, but you can use any name you want.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>JavascriptMVC For Newbies Part 1
<link rel="stylesheet" type="text/css" href="mvcForNewbies.css" />
<script type='text/javascript' src='../steal/steal.js?mvcForNewbies1,development'>
</script>
<body>
<div id='first_div'>
</div>
</body>
</html>
The document contains only one div, all other content will be created by Javascript code, often via templates.
Create the top script
The first version of the top script (mvcForNewbies.js) looks like this:
steal(
'//jquery/class/class.js',
'//jquery/controller/controller.js',
'//jquery/view/ejs/ejs.js',
'//jquery/controller/view/view.js',
'//jquery/controller/subscribe/subscribe.js',
'//jquery/model/model.js',
'//jquery/dom/fixture/fixture.js').then(
'mvcForNewbies/application/first_div/first_div_controller.js').then (
function($){
$(document).ready(
function() {
// Create a new first_div controller on the #first_div element
$("#first_div").first_div();
}
)
}
)
The steal function first loads the jquery and javascriptMVC files, then the controller file, and then, on $(document).ready, connects the controller to the div. I am not sure why I have to use the $(document).ready function, the srchr application seems not to need it.
Create the controller
The first version of the first_div controller looks like this:
$.Controller.extend("first_div",
/* @static */
{
defaults : {
defaultText : "Hi, i am firstDiv!"
}
},
/* @prototype */
{
/**
* Initialize a new instance of the firstDiv controller.
*/
init : function() {
$('#first_div ').html('application/first_div/first_div_init.ejs', {header:"My first div"});
},
/**
* Responds to a click on th button created by the template
* @param el Not used
*/
'#my_first_button click': function( el ){
$('#first_div').append("<br>You pressed me!");
}
}
);
Notes
- The loading of the template also could also be written like this:
$('#myFirstDiv').html('//mvcForNewbies/application/first_div/first_div_init.ejs',
{header:""My first div""});
I prefer not to include the application name here, as renaming the current application and reuse in another application will be easier. The future will perhaps show if this is a good idea.
- defaultText is not used.
- When the button with id my_first_button is clicked, the controller will append the text You pressed me! to the div. Everytime you click, new text will be added on a new row. Maybe not very amusing…
- The name of the controller is just first_div, I will probably add some prefix or namespace later (testing refactoring).
Create a view
We only need one more piece of code to get this simple application to work, and that is the view, which in this case is the template first_div_init.ejs:
<h2><%= header %></h2>
<button id='my_first_button'>Press me</button>
This code will produce an h2 element, with text passed as the named parameter header, and the button with id my_first_button.
Adding style
As you may have noticed, the style sheet loaded by the html page has not been defined yet. We cretae a simple css file (mvcForNewbies.css), giving the first_div some background color:
#first_div {
background: #CCCCCC;
position: absolute;
top: 10px;
left: 10px;
width: 200px;
}
Not setting the height will allow the div to grow vertically as we add more rows.
This example can be tested here, and downloaded here
