Documentation | jsbeans.mvc

Architecture

Description

This guide is not intended to be a reference on MVC pattern as you can find everywhere in the net (e.g. at Wikipedia)
Here is just as view lines on how the pattern has been applied.

Model

Description

It's a plain JSON or Object (just like POJOs) representing data.
The difference between the two is just a matter of taste or convenience as JSON is often used for remote data and Javascript's Object for locally used data.

Example :: TODO model in JSON format

{
	id: new Date().getTime(), 
	checked: false, 
	content: '',
	dueDate: new Date()
}

Example :: TODO model as Javascript Object

model.TODO = function() {
	this.id = new Date().getTime();
	this.checked = false;
	this.content = "";
	this.dueDate = new Date();
};

As in TODO-list app we need a TODOList Object:

model.TODOList = function() {
	this.todos = [];
};

View

Description

It's about what end-user see on screen, so we're talking about HTML.

The philosophy

To completly separate View from Model a Javascript Template Engine has been adopted as natural choise for an MVC framework.
The chosen one is doU.js, version 0.1.2, for its speed and small footprint. The code has been included inline so there's no need to call another javascript to make things work.

Template location

There are two different ways to store views: remote or local location.

Remote templates are retrieved via an AJAX request, then stored locally to improve performances. Template location is set using a custom attribute in the script declaration:
```
<script type='text/javascript' src='js/jsbeans/mvc.js' templatePath='app/view'></script>
```
Local templates are exactly the same as remote ones, but they are store into script tags with id used as template name.
To use a local template you must set to true the custom attribute 'inline' as follow:
```
<script type='text/javascript' src='js/jsbeans/mvc.js' inline='true'></script>
```
e.g.
```
<script id='view_name' type='text/template'>Template content</script>
```

Note that you may only use one location; if both are defined using either tamplatePath AND inline='true' local templates take priority over remote ones.

Template syntax

For a complete syntax review please see official doU.js documentation, here are just a few samples to show how doU has been used.

Template local variable

Model is passed to template using the local variable data.

Evaluation

Anything between {{ and }} is evaluated as javascript.
Direct output is made using the {{= notation (e.g. {{=data.<variable>}})

Sample :: output

Firstname: {{=data.firstname}}
Lastname: {{=data.lastname}}

Sample :: if

<div class='some_class'>{{ if (data.someData == 'someValue') { }} <span>conditional output</span> {{ } }}</div>

Sample :: for

<ol>
{{ for (var i = 0; i < data.someArray.length; i++) { }} 
	<li>{{=data.someArray[i];}}</li>
{{ } }}
</ol>

Full example :: TODO-list

<table id="todos">
<thead>
<tr>
	<th><input type="checkbox" id="checkAll" onclick="jsbeans.Checkbox.selectAll(this, {name:'todoCheck'})"/></th>
	<th id="contentCell"><input type="text" onkeyup="jsbeans.Table.filter(this.value, 'contentCell')"/></th>
	<th> </th>
</tr>
</thead>
<tbody id="todosTbody">
{{ if (data.todos.length > 0) { }}
	{{ for (var i = 0; i < data.todos.length; i++) { 
		var todo = data.todos[i];
	}}
	<tr>
		<td><input type="checkbox" name="todoCheck" id="_{{=todo.id}}" {{ if (todo.checked) { }} checked="checked" {{ } }}/></td>
		<td>{{=todo.content}}</td>
		<td>{{=todo.dueDate}}</td>
	</tr>
	{{ } }}
{{ } else { }}
	<tr><td colspan="3"><em>no item to display</em></td></tr>
{{ } }}
</tbody>
</table>

Controller

Description

Responsible to manage models and match them with the right view.

Utility methods

The framework comes with a few convenience methods. For controller is just one: execute(/* model */ m, /* view name */ v, /* callback */ c).
The approach is: since there's no limit on how your controller will be implemented, the framework just tries to help you to get the match between model and view.

Sample :: static

MyController = {
	doSomething: function() {
		// AJAX post using jQuery 
		$.post(
			// URL
			"get_data.php",
			// parameters
			{ id: 12 },
			// callback
			function (txt, status, jqxhr) {
				// assuming everything worked fine
				// calling the framework method
				jsbeans.mvc.controller.execute(
					// txt is the model, presumbly a JSON
					txt, 
					// the framework searches for a file named "view_name" with extension html 
					// in a location as defined in "templatePath" attribute of jsbeans/mvc.js declaration
					// e.g. app/view/view_name.html
					"view_name", 
					// do what you want with resulting html as match between data (model) and template (view)
					function(html) {
						document.getElementById("anId").innerHTML = html;
					}
				);
			}
		);
	}
}

Menu