Gillie

A 4K JavaScript micro framework inspired in Backbone

© 2015 Pablo Vallejo under the terms of MIT License.

Model API reference

Initialize initialize: function() {}

Initialize method gets runed every time a model, view or handler is instantiated. It receives no parameters.

Usage

var Person = Gillie.Model.extend({

    // Run on instantiation
    initialize: function() {
        console.log( 'Person model has been instantiated' );
    }
});

// Create an instance, will output the message inside "initialize" through the console
var john = new Person();

Arguments

None

Returns

null

Defaults defaults: {}

Default attributes we want our model to have when it's instantiated. This defaults are overwritten when we set them in the model.

Usage

var Person = Gillie.Model.extend({

    // Default attributes
    defaults: {
            'alias': 'none'
        ,   'picture': 'default.jpg'
    }

});


// Instantiate Person
var john = new Person();

// By default, John's picture will be "default.jpg"
john.get( 'picture' ); // default.jpg

// However, we can change it.
john.set( 'picture', 'john-pic.jpg' );

URL url: {}

This attribute is intended to be the base URL for all request methods.

Usage

var Person = Gillie.Model.extend({

        defaults: {
            'picture': 'default.jpg'
        }

        // Default URL for all requests
    ,   url: 'http://localhost/api/v1/'

        // Save
    ,   save: function() {

            this.Post( 'person/', 'person.create' );
        }

});

var john = new Person({
        'name': 'John'
    ,   'picture': 'john.jpg'
});

// Saving model will make a POST request
// to 'http://localhost/api/v1/person/'
john.save();

Request methods

Gillie provides request methods, to match four HTTP verbs GET, POST, PUT and DELETE.

Post model.Post( path, event, options )

Performs a POST request to an URL built using the base URL plus the path passed. After request is finished, triggers an event with the key of the event. So if you pass resource.event as event, it will be triggered by the model and listeners will receive as parameters, the model instance and the server response.

Usage

var Person = Gillie.Model.extend({

    // Create person
    create: function( event ) {
        this.Post( 'person/', event, {} );
    }

});

var david = new Person({
        'location': 'Nevada'
    ,   'picture': 'david.jpg'
});

// Create person and trigger 'person.create' event afterwards, so that the "view" can render the new created model.
david.create( 'person.create' );

Arguments

Param Type Details
path string Part of the URL after the base one.
event string Event triggered by the model when the request finishes.
options Additional attributes that can be passed as AJAX options, like success, error, etc.

Returns

xhr

Get model.Get( path, event, options )

Performs a GET request to the specified URL.

Usage

var Person = Gillie.Model.extend({

    // Get data from server
    sync: function( event ) {
        this.Get( 'person/:_id', event );
    }

});

// Create person and get their info
var maria = new Person({
    _id: 10
});

// Get maria's info, and trigger 'person.get' after request finished.
maria.get( 'person.get' );

Arguments

Param Type Details
path string Part of the URL after the base one.
event string Event triggered by the model when the request finishes.
options Additional attributes that can be passed as AJAX options, like success, error, etc.

Returns

xhr

Put model.Put( path, event, options )

Performs a PUT request to the server.

Usage

var Person = Gillie.Model.extend({

    // Update person
    update: function( event ) {
        this.Put( 'person/:_id', event );
    }

});

var jordan = new Person({
        '_id': 11
    ,   'localtion': 'New York'
});

// Update Jordan's data, and trigger 'person.update' after request finishes.
jordan.update( 'person.update' );

Parameters

Param Type Details
path string Part of the URL after the base one.
event string Event triggered by the model when the request finishes.
options Additional attributes that can be passed as AJAX options, like success, error, etc.

Returns

xhr

Delete model.Delete( path, event, options )

Makes a DELETE request to the specified URL, intended to remove resources from the database.

Usage

var Person = Gillie.Model.extend({

   // Delete person
   delete: function( event ) {
        this.Delete( 'person/:_id', event );
   }

});

var jenny = new Person({
        _id: 13
})

// Delete person from the server, and trigger 'person.delete' event afterwards, which can be used for listeners to alter the DOM and the like.
jenny.delete( 'person.delete' );

Parameters

Param Type Details
path string Part of the URL after the base one.
event string Event triggered by the model when the request finishes.
options Additional attributes that can be passed as AJAX options, like success, error, etc.

Returns

xhr

Get and set and unset

Useful functions to get, set and remove model attributes.

get model.get( key )

Get an attribute from the model.

usage

var Car = Gillie.Model.extend({});

// Create a new car
var camaro = new Car({
        year: 2014
    ,   cubic_inches: 378
    ,   manufacturer: 'Chevrolet'
});

// Get and print car manufacturer through the console.
var manufacturer = camaro.get( 'manufacturer' );
console.log( manufacturer ); // Chevrolet

Parameters

Param Type Details
key string Model attribute to get the value of

Returns

mixed

set model.set( key, val ), model.set( object )

Set an attribute or a set of attributes to the model.

Usage

var Car = Gillie.Model.extend({});

var camaro = new Car();

// Set attribute by passing key, value.
camaro.set( 'year', 2014 );


// Set model attributes passing and object of key, values to set.
camaro.set({
        manufacturer: 'Chevrolet'
    ,   cubic_inches: 378
});

// Get attributes.
console.log( camaro.get( 'year' ) ); // 2014

Parameters

Param Type Details
key string Or object Name of the attribute we're setting. If we pass an object of key value pairs, there is no need to use the second parameter.
value mixed Value of the attribute we want to store.
options Additional attributes that can be passed as AJAX options, like success, error, etc.

Returns

object Model instance

unset model.unset( key )

Removes a model attribute.

Usage

var Car = Gillie.Model.extend({});

var camaro = new Car({
        year: 2014
    ,   cubic_inches: 378
    ,   color: 'black'
});

// Remove color from car
camaro.unset( 'color' );

console.log( camaro.get( 'color' ) ); // null

toJSON model.toJSON()

Return an object with the model attributes.

Usage

var Car = Gillie.Model.extend({});

var camaro = new Car({
        year: 2014
    ,   manufacturer: 'Chevrolet'
});

// Get an object with model attributes.
var attributes = camaro.toJSON();
console.log( attributes ); // { year: 2014, manufacturer: 'Chevrolet' }

Returns

object

Events

As well as the views, models can triger and listen for events. To take a look at how events work, go to events API

comments powered by Disqus