Freja Tutorial 3

From CSScripting

Tutorial 3. Updating data in the Model

If you've followed Tutorial 1 and Tutorial 2, you're now able to switch between two different views of the same model. Now, we want the model to reflect any change we make in the edit view.

The edit view contains a form. Each form field corresponds to one element of our model. When the form is submited we need to retrieve the field values and update the model elements accordingly.

Here's the line of code that will take care of this for us:

document.editform.onsubmit = function() { data.updateFrom(edit); return false; }

The updateFrom method of the model does all the work here. The rest is common javascript : intercept the onsubmit event and prevent the form from actually being submitted to the server (return false).

I will explain how updateFrom works, but first we need to find out where this line of code goes in our javascript.

View Behavior

Up to Tutorial 2, our javascript code looked like this:

var data = getModel('models/data.xml');
var display = getView('views/display.xsl');
var edit = getView('views/edit.xsl');
display.render(data, "content");

document.getElementById('editLink').onclick = function() { edit.render(data, "content"); };
document.getElementById('displayLink').onclick = function() { display.render(data, "content"); };

Note that this code only renders the edit view when the 'edit' link is clicked. This means that before the click, the form simply does not exist. And if the form does not exist, we cannot attach a function to the onsubmit event, like we need to.

In Freja, each view has a behaviors property. You can use it to declare event handlers and Freja will automatically attach them once the view is rendered.

var edit = getView('views/edit.xsl');
edit.behaviors["editform"] = {
	onsubmit : function() { /* event-handler code here */ }
};

In Freja we use the HTML class attribute to identify which HTML element the handlers should be attached to. Here our form has the 'editform' class so the onsubmit event handler will be automatically attached to the form element.

Now, we just need to wrap our update call inside that function.

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

See the updated javascript code and the result. Click the edit link, then update the values and click Ok. The changes will automatically be saved in the model and the display view will show the new content.

onRenderComplete Event

Instead of the declarative method shown above, behaviors can also be attached to a view using the onRenderComplete event.

Freja._aux.connect(edit, 'onrendercomplete', function() { /* event-handler code here */ });

The Model.updateFrom method

Model.updateFrom(view);

The Model.updateFrom method takes one argument, a view containing a form. Take a look again at the view template and notice the syntax of the name attribute of the <input> and <textarea> tags.

<input name="/item/name" type="text" ... />

The name attribute uses the xpath notation to indicate the relationship between the field and the model.

Node names are separated by a forward-slash. The first one is the root element, then going down the XML node tree we list the complete path to the node to be edited. Here our XML is minimal, so we just have "/item/name".

If we want to edit an attribute, we add its name at the end of the list, using the @ separator. For instance:

<input name="item/price/@currency" .../>

Freja uses that information to do the hard work: reading the field values, finding and updating the corresponding nodes in the model XML.