Eight Weeks of Prototype: Week 8, A Complete Prototype Example

var AddressBook_Contacts = Class.create({
 
    // define the template used to display each contact
    template : new Template(
        '<div class="contact">'
      + '    <span class="name">#{name}</span>'
      + '    <span class="email">(#{email})</span>'
      + '    <div class="location">'
      + '        #{location}'
      + '    </div>'
      + '</div>'
    ),
 
    initialize : function(container)
    {
        this.container = $(container);
 
        // observe the custom event so we know when a new contact is created
        Event.observe(document, 'contacts:added', this._onContactAdded.bindAsEventListener(this));
 
        // load existing contacts
        this.load();
    },
 
    load : function()
    {
        var options = {
            method    : 'get',
            onSuccess : this._onLoadSuccess.bind(this)
        };
 
        // submit request to retrieve contacts
        new Ajax.Request('contacts.php', options);
    },
 
    _onLoadSuccess : function(transport)
    {
        var json = transport.responseJSON;
 
        // clear the contacts container
        this.container.update();
 
        // now populate the container with each contact
        json.each(function(contact) {
            this.container.insert(this.template.evaluate(contact));
        }, this);
    },
 
    _onContactAdded : function(e)
    {
        this.container.insert(this.template.evaluate(e.memo.contact));
    }
});