Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Chitin is very basic widget creation library
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


Chitin helps you build complex web sites and simple web apps, giving you basic inheritance, event management API and means of organazing your widgets in nested structures. Additionaly, jquery.chitin.js provides infrastructure for building jQueryUI-like widgets. Inheritance and event management are borrowed from Backbone.js, so it may be already familiar to you.



Chitin.Abstract is Chitin's hierarchy root. You can use it to built your own subclasses, e.g. models, controllers or business logic objects.

  • Chitin.Abstract#initialize basically is constructor. It accepts one argument, /** Object*/ options. options got mixed with this.defaults to provide this.params
  • Chitin.Abstract#_superMethod(/** String */ name, /** arguments|Array */args) is utility method for calling overriden parent method: javascript var SomeClass = Chitin.Abstract.extend({ initialize: function (options) { console.log('SomeClass'); this._superMethod('initialize', arguments); } })
  • Chitin.Abstract#_superProperty(/** String */ name) Chitin extensively uses "property can be plain object or function returning such object" paradigm. This method helps you get parent's properties:
    var Dialog = Chitin.Widget.extend({
        events: {
            'click .js-close': 'close'

    var DialogForm = Dialog.extend({
        events: function () {
            var parentEvents = this._superProperty('events');

            var events = _.extend({}, parentEvents, {
                'reset form': 'close'
  • Chitin.Abstract.extend is static method providing inheritance mechanism. Please refer to Backbone.js documentation for further info.


Chitin.Observable inherits directly from Chitin.Abstract and mixes in Events module. Event management is pretty standart: on, off, trigger and so on.


Chitin.Widgets are heavily inspired by Backbone's View, but provide more declarational properties and can manage nested widgets. Like it's inspirer, widgets have $el property, $ function and handles event property same way.


Chitin.Widget isn't so render-agnostic as Backbone.View, it relies on _.template by default as render mechanism, although this behaviour can be easily changed. By default, when you call render(someData) method, following things happen:

  1. Widget looks up tpl property (and throws exception if not found)
  2. Widget prepends this property content with Chitin.config.templateSelectorPrefix ('script.js-tpl-' by default) and forces jQuery to search node by this selector
  3. If no such node found or there's too many of them, exception is thrown
  4. This node's content is passed to Chitin.config.templateEngine (_.template by default) along with someData
  5. Widget's element's innerHTML gets replaced by value returned on previous step


If your widget lives long enough and update it's content from time to time, you probably find yourself updating pieces of widget's DOM manually (not every click should lead to complete re-rendering). To help you with this, Chitin.Widget provides automagical _ui property. _ui is hash which keys are names and values are selectors to search for inside widget's DOM:

var Dialog = Chitin.Widget.extend({
    events: {
        'submit form': 'onSubmit'

    _ui: {
        ajaxLoader: '.js-loader'

    onSubmit: function (evt) {

Compatibility and requirements

Chitin should work nicely either with AMD/Require.js loaders and without them. It requires underscore and jQuery, but will work with lo-dash and Zepto. When in AMD-mode, Chitin expects jQuery/Zepto as '$' and underscore/lo-dash as '_'.

Something went wrong with that request. Please try again.