Backbone.js – Cos’è un Model?

Lo sviluppo di applicazioni web di una certa complessità richiede l’adozione di un pattern architetturale che possa garantirne:

• Modularità
• Leggibilità
• Modificabilità
• Sicurezza
• Testabilità

Nella maggior parte dei casi viene impiegato il pattern MVC o una delle sue piú recenti varianti cosicché si puó più in generale parlare di pattern MV*. Al di là di tutto gli elementi conosciuti come Model, View e Controller dell’originale pattern MVC saranno sempre presenti. In questo articolo rivolgeremo la nostra attenzione ai model in modo specifico all’implementazione presente nel framework JavaScript Backbone.js.

Che cos’è un Model?

I Model sono il cuore di qualsiasi applicazione JavaScript, contengono i dati, così come la logica che circonda questi dati come per esempio: conversioni, convalide, proprietà, e controllo di accesso.

In Backbone.js il concetto do model viene implementato all’interno dell’oggetto Backbone.Model il quale può essere facilmente esteso al fine di aggiungere proprietà e comportamenti particolari. Nel seguente esempio useremo un Model per rappresentare il concetto di Persona:

1
2
3
4
5
6

var Person = Backbone.Model.extend({
    initialize: function(){
        console.log("This is a person!");
    }
});
var person = new Person();

In tutti i model che vengono creati attraverso l’estensione di Backbone.Model allor quando sia necessario eseguire una o più operazioni di inizializzazione si consiglia di ridefinire il metodo initialize() che viene innescato ogni volta che viene creato una nuova istanza del Model.

Settare attributi

Tutti gli oggetti di tipo Backbone.Model o che estendono da esso sono dei contenitori dei dati dietro i quali ruota tutta la logica dell’applicazione che si sta implementando. Backbone.js fornisce dei metodi per settare e ottenere i valori memorizzati in questi tipi di oggetti.

Il settaggio degli attibuti può avvenire in diversi modi e ognuno sceglierà quello più opportuno a seconda dei casi. Prendendo in riferimento il seguente oggetto Person esteso da Backbone.Model si vedranno i vari casi di utilizzo:

1
2
3
4
5

var Person = Backbone.Model.extend({
    initialize: function(){
        console.log("This is a person!");
    }
});

• Inizializzazione dei campi del model attraverso il costruttore:

1

var person = new Person({firstName: "Toni", lastName: "D’Angelo", age: 25});

• Settaggio di uno o più campi del model tramite il metodo set():

1
2

var person = new Person(); 
person.set({firstName: "Toni", lastName: "D’Angelo", age: 25});

• Settaggio di un singolo campo tramite il metodo set():

1
2

var person = new Person();
person.set("firstName","Toni");

Passare un oggetto JavaScript nel costruttore è equivalente a chiamare il Model.set(). Questo metodo imposta un hash contentente uno o più attributi sul Model.

Ottenere attributi

Gli attributi si possono ottenere richiamando il metodo Model.get() possiamo accedere alle proprietà in qualsiasi momento.

1
2
3
4

var person = new Person({ firstName: "Toni", lastName: 'D’Angelo', age: 25});
var firstName= person.get("firstName"); //”Toni”
var lastName= person.get("lastName"); //"D’Angelo"
var age= person.get("age"); //25

Nel momento in cui si ha la necessità di leggere o clonare tutti i dati degli attributi di un modello è consiglianile usare il metodo Model.toJSON(). Attenzione il nome del metodo può essere fuorviante in quanto lo stessorestituisce una copia degli attributi sotto forma di oggetto e non di stringa JSON.  Per ottente una stringa JSON utilizzare il metodo JSON.stringify() come di seguito riportato:

1

console.log(JSON.stringify(person.toJSON()));

Settare valori di default di un Model

Un Model potrebbe presentare la necessità di avere dei valori di defaults che in tal caso andrebbero settato ogni qual volta viene instanziato un nuovo oggetto per evitare ciò è sufficiente settare la propietà ‘defaults’ nella dichiarazione stessa del Model come di seguito riportato:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var Person = Backbone.Model.extend({
        defaults: {
            firstName: 'FirstName',
            lastName: 'LastName' ,
            age: 0
        },
        initialize: function(){
            console.log("This is a person wuth default fields value");
        }
    });   
    var person = new Person();   
    var age = person.get("age"); //0
    var name = person.get("firstName"); //"FirstName"
    var child = person.get("lastName"); //'LastName'

Manipolare attributi di un Model
Un model può contenere tutti i metodi personalizzati necessari a manipolare gli attributi. Come impostazione predefinita, tutti i metodi sono pubblici.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Person = Backbone.Model.extend({
        defaults: {
            name: 'Apollo',
            age: 0,
            child: ''
        },
        initialize: function(){
            alert("Welcome to Backbone.js");
        },
        adopt: function( newChildsName ){
            this.set({ child: newChildsName });
        }
    });
 
    var person = new Person({ name: "Tony", age: 25, child: 'Tonino'});
    person.adopt('Nick Naso');
    var child = person.get("child"); // ==>'Nick Naso'

Quindi noi possiamo implementare metodi di get e set e eseguire altri calcoli utilizzando gli attributi del nostro Model in qualsiasi momento.

Catturare le modifiche del Model

Ogni attributo di un Model può avere dei Listeners per rilevare le modifiche ai loro valori. Nella nostra funzione di inizializzazione andiamo a legare una funzione chiamata ogni volta che noi cambiamo il valore del nostro attributo. In questo caso se il nome della nostra ‘Persona’ cambia noi possiamo allertare il loro nuovo nome.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Person = Backbone.Model.extend({
        defaults: {
            name: 'Apollo',
            age: 0
        },
        initialize: function(){
            alert("Welcome to Backbone.js");
            this.on("change:name", function(model){
                var name = model.get("name"); // 'Nick Naso'
                alert("Changed my name to " + name );
            });
        }
    });
 
    var person = new Person({ name: "Toni", age: 25});
    person.set({name: 'Nick Naso'}); // viene innescato un change event

Possiamo associare il change listener a singoli attributi “change:name” o se vogliamo ascoltare le modifiche  a tutti gli attributi “change”.

Articolo Scritto da:

Antonio D’Angelo @daton89

Nicola Del Gobbo  @NickNaso

Nacios Technologies @NaciosTechnolog