Freja Tutorial 4

From CSScripting

Tutorial 4. Adding and Editing Model Data

Here are the files used for this tutorial:

• models/data.xml : Contains the data we want to work with, here an extract from a restaurant's menu.
• views/display.xsl : The template used to display the menu.
• views/edit.xsl : The template used to edit a menu item.
• controller/tutorial.js : The code for this tutorial
• index.html : The page that puts everything together.
• lib/freja.js : The Freja framework code (link intentionaly left out for clarity).

You can download the files and try this example offline (note: offline use is not supported in Safari).

index.html

The index.html page simply loads the required scripts and provides a placeholder div where the views are rendered.

tutorial.js

This is the code written for this tutorial. Let's review the important parts:

var menu = getModel('models/data.xml');
var display = getView('views/display.xsl');
var edit = getView('views/edit.xsl');

This is where we load the initial data and the two view templates.

edit.behaviors["editForm"] = {
	onsubmit : function() {
		menu.updateFrom(edit);
		display.render(menu, "content"); 
		return false;
	}
};

This handles the form submission in edit view. The data is saved in the model and the 'display' view is rendered. For more information on the updateFrom method and the behaviors property, see tutorial #3. For more information on the render method, see tutorial #2.

Editing an existing item:

display.behaviors["editLink"] = {
	onclick : function(n) {		
		edit.render(menu, "content", {itemid:n.id}); 
		return false;
	}
};

This handles the edit link by switching to the edit view. The edit view requires one parameter, the id of the item to edit.

Parameters can be passed to a view using the third argument of render. Here {itemid:n.id}. We pass the parameter called itemid and we give it the value of the link's id (which we conveniently constructed to match the corresponding item id attribute).

In the view's XSL document, a parameter is declared using this syntax.

<xsl:param name="paramname"></xsl:param>

The parameter can referred to throughout the template with $paramname.

Here's how we constructed the edit link in the display template:

<a href='#' id='{@id}' class='editLink'>edit</a>

{@id} is the XSL syntax that inserts the value of the id attribute for the element processed by the template (here <item>).

Adding a new item:

display.behaviors["addLink"] = {
	onclick : function() {
		var newitem = Freja._aux.loadXML(Freja._aux.xmlize( {name: '', description:'', price: '' },"item"));
		var root = menu.document.documentElement;	
		newitem = root.appendChild(newitem.documentElement);
		var newid = 'item'+root.childNodes.length;
		newitem.setAttribute('id',newid);
		edit.render(menu, "content", {itemid:newid}); 
		return false;
	}
};

This is where the heavy work is done for adding a new entry in the menu. The first line of the onclick handler creates a new empty menu item. Freja._aux.xmlize takes a javascript object and creates the corresponding XML string. Here we get:

<item>
  <name />
  <description />
  <price />
</item>

Freja._aux.xmlize is purely a convenience function. We could have written and passed the XML string directly to Freja._aux.loadXML.

Freja._aux.loadXML takes the given XML string and creates a DOM document.

Line 2 and 3 take the new item node and append it to our menu using standard DOM methods (the menu DOM document is available in the model's document property).

Before we can edit the new menu item, we need to assign it a unique identifier (line 5). Here we compute it using the childrenNodes DOM properties (line 4). Note that in a real life usage, this method is not going to work if you allow for items to be removed.

The new item is now ready and we switch to the edit view (line 6).

That's it for this tutorial. Again, you can test it here and download the files.