cortado.js

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

Features

• Custom Events
• Provides native DOM wrappers, ie. this.$('.myEls')
• Template Engine agnostic
• Use an existing HTML element or let Cortado create an element for you

What would I use this for?

• If you don't want to use jQuery for a smaller project
• If you want easy organisation of your DOM JS
• If you're used to working with MV* frameworks, but they're overkill for your smaller project
• You want organisation around your usage of Templating engines

Browser compatibility

• IE9+
• EVERY OTHER BROWSER

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.trigger('customEvent');
    },

    /* 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>";
        this.bindUIElements();
        console.log(this.ui.button.innerHTML);
        return this;
    }

});

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

document.body.appendChild(view.render().el);

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

view.close();

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

view.remove();