AJAX Request from Google Closure Library to Nette Framework back-end

default.phtml

{block content}

<div id="header">
	<h1>Integration of Nette Framework and Google Closure Library</h1>

	<h2>Two most powerfull frameworks.</h2>
</div>

<div>
    {snippet:list}
    <ul id="students">
    {foreach $students as $student}
        <li>{$student}</li>
    {/foreach}
    </ul>
    {/snippet}
    <script>
        var data = [
                {'name': 'Vaclav',      'age' : 20},
                {'name': 'Petr',        'age' : 45},
                {'name': 'Frantisek',   'age' : 77}
            ],
            students = document.getElementById('students');
        
        nette.exps.makeStudents(data, students);
        nette.exps.HANDLE_STUDENT = {link student!};
    </script>
</div>

{/block}

{block javascript}
    {include #parent}
    <script src="{$basePath}/js/students.js"></script>
{/block}

students.js

/**
 * Woplandia Google Closure Library experiments.
 * Testing: Simple XMLHttpRequest to Nette Framework back-end
 *
 * @copyright  Copyright (c) 2010 Vaclav Bohac
 * @package    Woplandia/GoogleClosure
 */

goog.provide('nette.exps');
goog.provide('nette.exps.Student');

goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.net.XhrIo');


/**
 * Student constructor
 */
nette.exps.Student = function (firstname, age, container) {
    this.firstname = firstname;
    this.age = age;
    this.parent = container;
};


/**
 * Creates the DOM entry from the nette.exps.Student object.
 * Element looks like this <li title="18">John</li>.
 */
nette.exps.Student.prototype.makeStudentDom = function () {
    var li 
        = goog.dom.createDom('li', {'title':this.age}, this.firstname);
        
    goog.events.listen(li, goog.events.EventType.CLICK, this.getAge, false, this);

    this.parent.appendChild(li);
};


/**
 * Goes through the list of data,
 * creates the dom elements 
 * and puts it to the container element.
 */
nette.exps.makeStudents = function (data, container) {
    var students = [],
        student;

    goog.array.forEach(data, function (data, index) {
        student = new nette.exps.Student(data.name, data.age, container);
        student.makeStudentDom();
        students.push(student);
    });
    
    return students;
};


/**
 * Get upgraded list of students from server 
 * and update snippet--list element.
 */
nette.exps.Student.prototype.getAge = function (e) {
    goog.net.XhrIo.send(nette.exps.HANDLE_STUDENT, function (e) {
        var xhr = e.target;
        var obj = xhr.getResponseJson();
        
        for (var name in obj.snippets) {
            var snippet = document.getElementById(name);
            snippet.innerHTML = obj.snippets[name];
        }
    }, null, 'GET', {'X-Requested-With': 'XMLHttpRequest'});
};