Backbone II | Modelos

Bueno hoy hablaremos un poco más de Backbone, en el capítulo anterior vimos una introducción leve a los modelos, en este pequeño post vamos a profundizar un poco más.

Requerimientos:

• Fake Online REST API
• Backbone JS
• Editor ( atom, gedit, notepad, etc )

Modelos.

Como ya habíamos visto los modelos no son más que una representación lógica de una entidad de datos, Backbone provee una definición para definir y trabajar con ellos

Creación.
Lo primero que hay que hacer es definir nuestras clases Modelos mediante el método extend de Backbone.Model:

// Definición del User Model
var User = Backbone.Model.extend({});
// Instancia de Usuario
var testUser = new User( { name: 'Mario', username: 'mario192', email: 'mario@hotmail.com.tv'} );

console.log(testUser.get('name'));
// Mario
console.log(testUser.get('email'));
// mario@hotmail.com.tv

En este caso definimos un modelo User vacío sólo para efectos del ejemplo pero es posible definir cuantas propiedades necesitemos.


Creación con Defaults.
Los modelos tienen una propiedad llamada defaults que sirve para definir los valores por defecto que se asignaran a los atributos si estos no son especificados al momento de crear el objeto.

var User = Backbone.Model.extend({
    defaults: {
        name: '',
        username: 'test@gmail.com',
        email: '',
        phone: '0000-00-00-00',
        address: [],
        company: null
    }
});

var testUser = new User({name:'test'});

console.log(testUser.get('username'));
// test@gmail.com

console.log(testUser.get('name'));
// test

Constructor/Initialize
Es posible definir una propiedad constructor o initialize que será llamada cada vez que se cree una instancia y a través de la cuál se pueden pasar los valores iniciales de la data en un modelo.

var User = Backbone.Model.extend({
    defaults: {
        name: '',
        username: 'test@gmail.com',
        email: '',
        phone: '0000-00-00-00',
        address: [],
        company: null
    },
    initialize: function(attributes, options) {
        this._isBlocked = false;
    }
});

Estado ( data )
El estado de un modelo se almacena en una propiedad especial llamada attributes, está propiedad contiene por lo general un objeto JSON que representan los datos en el servidor.

No se recomienda manipular directamente esta propiedad, Backbone dispone de dos métodos en dado caso de que se requiera obtener o actualizar dichos valores.

Actualizar Estado ( data )
Para actualizar el estado de alguna de las propiedades en attributes se emplea el método set definido en Backbone.Model

var User = Backbone.Model.extend({
    defaults: {
        name: '',
        username: 'test@gmail.com',
        email: '',
        phone: '0000-00-00-00',
        address: [],
        company: null
    },
    initialize: function(attributes, options) {
        this._isBlocked = false;
    }
});

var testUser = new User({name: 'Susan'});
console.log(testUser.attributes['name']);
// Susan

testUser.set('name', 'Ash');
console.log(testUser.attributes['name']);
// Ash

Leer Estado ( data )

Para obtener el valor/estado de alguna de las propiedades en attributes se usa el método get ( Ya lo hemos usado en los ejemplos anteriores )

var User = Backbone.Model.extend({
    defaults: {
        name: '',
        username: 'test@gmail.com',
        email: '',
        phone: '0000-00-00-00',
        address: [],
        company: null
    },
    initialize: function(attributes, options) {
        this._isBlocked = false;
    }
});


var testUser = new User({name: 'Susan'});
console.log(testUser.get('name']);
// Susan  

REST Integration
Otra de las ventajas que obtenemos al usar Backbone es la integración transparente con RESTFUL APIs, solo basta definir la URL de nuestro endpoint en el modelo ( o colección ) y listo.
 

// Modelo independiente de Colección
var User = Backbone.Model.extends({
    urlRoot: 'https://jsonplaceholder.typicode.com/users'    
}); 

Cuando se trate de modelos que no estarán ligados a  una colección es necesario manipular la propiedad urlRoot  en caso contrario sólo modificamos la propiedad url.

Tanto los modelos como las colecciones proveen la siguiente interfaz para comunicarse con los RESTFUL endpoints:

GET  /books/ .... collection.fetch();
POST /books/ .... collection.create();
GET  /books/1 ... model.fetch();
PUT  /books/1 ... model.save();
DEL  /books/1 ... model.destroy(); 

Solicitando un usuario:

var User = Backbone.Model.extend({
  urlRoot: 'https://jsonplaceholder.typicode.com/users',
});

var testUser = new User({id:1});
testUser.fetch();

Creando un usuario:

var User = Backbone.Model.extend({
  urlRoot: 'https://jsonplaceholder.typicode.com/users',
});

var testUser = new User({name:'Susan', email:'susan@test.com'});
testUser.save();

Actualizando un usuario:

var User = Backbone.Model.extend({
  urlRoot: 'https://jsonplaceholder.typicode.com/users',
});

var testUser = new User({id:1});
testUser.fetch(); 

// Esperamos a que termine el request 

testUser.on('sync', function() {
    testUser.set('name', 'Marco Polo');
    testUser.save();
});

Eliminando un usuario:

var User = Backbone.Model.extend({
  urlRoot: 'https://jsonplaceholder.typicode.com/users',
});

var testUser = new User({id:1});
testUser.fetch();

// Esperamos a que termine el request
testUser.on('sync', function() {
    testUser.destroy();
});

Creo que por el momento es todo, suficiente información para procesar... happy hacking!