A sans-jQuery™ View & Event library for JavaScript web applications.

Download on GitHub


What would I use this for?

Browser compatibility

Example usage

var view = new Cortado({

	/* the listenTo function will listen out for 
	your triggered custom events. The second
	parameter is a callback function */

    init: function() {
        console.log('instance init');
        this.listenTo('customEvent', 'render');
        this.count = 1;

    /* either pass in a DOM element as the top level HTML
    element of your View */

    el: '#myView',

    /* or a HTML tagname and attributes */

    tagName: 'span',

    className: 'row',

    id: 'cell',

    /* this is an events object, you can map [event type],
    [selector] and then [callback] */

    events: {
        'click button': 'clicked'

    /* an handy `ui` object to map a shortcut to a
    selector, for caching etc... */

    ui: {
        button: 'button'

    /* you can trigger custom events within your View
    (or across multiple View with a Mediator Object) */

    clicked: function(){

    /* this is where you build up your HTML element.
    You may want to use a Templating engine
    for organisation */

    render: function(){
        this.el.innerHTML = "<button>" + (this.count++) + "</button>";
        return this;


/* here is where we actually put the View's HTML
element on the page */


/* every view has an in-built close method for
deregistering all events within the View */


/* every view has an in-built remove method for
removing the HTML element from the page */