In un precedente articolo ho sottolineato il ruolo fondamentale che può rappresentare Backbone per la realizzazione di una MVC javascript web application, elencando anche i vari componenti che la libreria mette a disposizione, oltre ad alcune applicazioni con essa realizzate.

Su lobaedesign.com invece, ho introdotto l’indipendenza della view dagli altri componenti con un tutorial su come realizzare un orologio analogico CSS3 e JavaScript con animazione, e su come la stessa view aggiorna gli elementi dell’interfaccia “osservando” il cambiamento di un model.

In questo post voglio introdurre invece altri due componenti per la creazione di una backbone web app:

• la collection, ovvero la lista secondo la quale organizzare i model
• il sistema di templating della libreria underscore.js, per la generazione del markup HTML

Lo farò attraverso un semplice tutorial che implementa il framework bootstrap 3 nel documento e usa due view diverse legate allo stesso model ed una alla lista.

Il nostro intento sarà quindi quello di creare una backbone web app responsive che mostra una lista di persone, ciascuna con informazioni proprie come nome, sesso, occupazione, e descrizione, e con possibilità da parte dell’utente di creare, modificare, eliminare una persona, oltre che poter visualizzare una modal con delle informazioni aggiuntive cliccando nel nome della lista.

Impostazione del documento

Come prima operazione, aggiungiamo al nostro documento, prima della chiusura del tag body,  le librerie di cui abbiamo bisogno:

<script src="js/jquery-1.10.2.min.js"></script> <!-- jquery -->
<script src="js/bootstrap.min.js"></script> <!-- bootstrap per il modal-->

<script src="js/underscore-min.js"></script> <!-- libreria di supporto per backbone e per il sistema di templating -->
<script src="js/backbone-min.js"></script><!-- backbone.js -->

<script src="js/demo.js"></script> <!-- il file js della nostra applicazione -->

Backbone.js e Undersore.js sono scaricabili dai rispettivi link:

• Sito web Backbone.js
• Sito web Underscore.js

Il markup HTML

Andiamo a vedere il markup HTML della view principale dell’applicazione, ovvero quello che comprende il form di inserimento e la lista:

<!-- form di creazione dell'individuo -->   

<div class="col-md-4 col-lg-4 well well-sm"> 
    <legend><i class="glyphicon glyphicon-user"></i> Aggiungi individuo</legend>
    <form action="#" id="add-form" method="post" class="form" role="form">
        <div class="row">
            <div class="col-xs-8 col-md-8">
                <input class="form-control" name="name" placeholder="Nome" type="text" />
            </div>
            <div class="col-xs-4 col-md-4">                    
                <select name="gender" class="form-control">
                    <option value="M">Maschio</option>
                    <option value="F">Femmina</option>
                </select>
            </div>
        </div>
        <input class="form-control" name="occupation" placeholder="Occupazione" type="text" />

        <label for="notes">Note</label>
        <textarea name="notes" id="notes" class="form-control" rows="3"></textarea>
        <button class="btn btn-block button add-person" type="submit">Aggiungi</button>
    </form>
</div>

<!-- la lista degli individui -->

<div class="col-md-8 col-lg-8">
 	<ul class="list-group">
    </ul>
</div>

I template di Underscore.js

Impostiamo ora il markup HTML dei template delle view secondo il sistema di templating di underscore.js; i metodi per comunicare alla view backbone quale template utilizzare per il rendering del markup da inserire poi nel documento sono principalmente tre:

1. Specificare il template sottoforma di variabile string nello script
2. Specificare il rifermento al template il cui markup è stato “posizionato” nel documento
3. Utilizzare librerie come require.js per “leggere” in modo asincrono il contenuto del template da un file esterno (solitamente di usa un file con estensione .html)

Personalmente preferisco utilizzare l’ultima opzione, soprattutto nel caso di web app ad architettura molto complessa, per due motivi principali:

• lasciare il nostro documento più pulito possibile
• migliore organizzazione del progetto per quanto riguarda la struttura dei file

In questo tutorial tuttavia prenderemo in considerazione il secondo metodo.

Per saperne di più sui sistemi di javascript templating leggi: 

• I sistemi di javascript templating e le migliori librerie

Per l’esperimento definiremo 3 view, quella dell’applicazione principale (che comprende il form di inserimento e l’ul della lista), quella di ogni singolo elemento del lista, e quella della modal delle informazioni aggiuntive.

Poiché per la prima delle tre imposteremo come elemento di riferimento il body stesso del documento, andiamo a definire il markup dei template delle altre due view:

<!-- *********** Template delle Views ************** -->

<!-- modal dell'elemento della lista -->

<script type="text/template" id="person-template">

    <div class="view"> 
        <div class="action pull-right">
            <button type="button" class="btn btn-xs button open-modal" title="View Modal">
                <span class="glyphicon glyphicon-eye-open"></span>
            </button>
            <button type="button" class="btn btn-xs button edit-view" title="Edit">
                <span class="glyphicon glyphicon-pencil"></span>
            </button>
            <button type="button" class="btn btn-xs button person-delete" title="Delete">
                <span class="glyphicon glyphicon-trash"></span>
            </button>
        </div>

        <h4><%=name%></h4>            
        <div class="gender-info">
           	Sesso: <strong><%=gender%></strong> - Occupazione: <strong><%=occupation%></strong>
        </div>
     </div>

     <div class="edit">

         <form action="#" class="form" role="form">
            <div class="row">
                <div class="col-xs-3 col-md-3">
                    <input class="form-control" name="name" value="<%=name%>" placeholder="Nome" type="text" />
                </div>
                <div class="col-xs-3 col-md-3">
                    <input class="form-control" value="<%=occupation%>" name="occupation" placeholder="Occupazione" type="text" />
                </div>
                <div class="col-xs-2 col-md-2">                    
                    <select name="gender" class="form-control">
                        <option value="M" <%if(gender=='M'){%>selected<%}%>>Maschio</option>
                        <option value="F" <%if(gender=='F'){%>selected<%}%>>Femmina</option>
                    </select>
                </div>
                <div class="col-xs-2 col-md-2">
                    <button class="btn btn-sm btn-block button save" type="submit">Salva</button>
                </div>
                <div class="col-xs-2 col-md-2">
                    <a href="#" class="btn btn-sm btn-default btn-block cancel">Annulla</a>
                </div>
            </div>		            
            <textarea name="notes" id="notes" class="form-control" rows="3"><%=notes%></textarea>
        </form>

     </div>

</script>

<!-- modal delle informazioni aggiuntive-->

<script type="text/template" id="modal-template">

   <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title"><%=name%></h4>
      </div>
      <div class="modal-body">
        	<div class="gender-info">
               	Sesso: <strong><%=gender%></strong> - Occupazione: <strong><%=occupation%></strong>
            </div>
            <p class="gender-notes">
               	<%=notes%>
            </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn button" data-dismiss="modal">Chiudi</button>
      </div>
   </div>

</script>

Dal codice puoi notare che ogni template è stato definito all’interno dell tag script in cui è stato impostato un attributo type con valore text/template. Così facendo il browser ignorerà questa porzione di codice che invece sarà raggiungibile da Javascript tramite l’attribuito id.

Il file JavaScript

Passiamo ora alla definizione dei vari componenti backbone della nostra applicazione, in primis occupiamoci dell’astrazione dei dati, il model della persona:

//definiamo il modello dell'individuo
var PersonModel = Backbone.Model.extend({

	// Attributi predefiniti per il modello, che vengono usati 
	//se non passati al momento dell'inizializzazione	
	defaults: {
		gender: "M",
		createdat: new Date()
	},

	initialize: function() {  

	},

	//elimina l'istanza del model
	clear: function() {
		this.destroy();
	}

});

Definiamo ora la collection in cui tutte le istanze del model appena definito verranno organizzate:

//definiamo la collection degli individui
var PersonList = Backbone.Collection.extend({

	// Impostiamo la referenza al model per questa collection.
	model: PersonModel,

	url: "#",

	// Filtra tutti gli individui Maschi o Femmina (in base al parametro passato).
	getGender: function(gender) {
		return this.where({gender: gender});
	}

});

Ora che abbiamo definito la nostra (semplicissima) struttura dei dati, vediamo l’impostazione delle view.

La view dell’elemento della lista

//impostiamo la view della persona per come elemento nella lista

var PersonView = Backbone.View.extend({

	// diciamo a backbone che il tag deve essere una li
	tagName:  "li",

	//settiamo la classe da impostare al tag li per usare gli stili bootstrap e l'animazione in entrata
	className: "list-group-item animated",

	// Coumunichiamo alla view a quale template far riferimento.
	template: '#person-template',

	// Bindiamo gli eventi agli elementi di questa view (i selettori funzionano come jQuery).
	events: {
		"click .person-delete"        : "deletePerson",
		"click .edit-view"   		  : "toggleView",
		"click .cancel"				  : "toggleView",
		"submit form"			  	  : "savePerson",
		"click .open-modal"			  : "openModal"	
	},

	//questa funzione viene eseguita ogni volta che viene creata 
	//una nuova istanza per questa view
	initialize: function() {

		//compiliamo il template in una variabile
		this.template = _.template($(this.template).html());

		//osserviamo l'evento change del model dell'individuo per fare in modo che 
		//quando ciò accade anche il markup della relativa view venga aggiornato
		this.listenTo(this.model, 'change', this.toggleView);

		//osserviamo l'evento destroy del model dell'individuo per fare in modo che 
		//quando ciò accade anche la relativa view venga rimossa
		this.listenTo(this.model, 'destroy', this.removeFromDOM);
	},

	// Effettua il render dei contenuti del markup della view nella lista.
	render: function() {
		$(this.el).html(this.template(this.model.toJSON()));
		return this;
	},

	//visualizza il modal per le informazioni dell'individuo
	openModal: function(){
		var model = this.model;
		var view = new ModalView({model: model});
		$("body").append(view.render().el);
		///richiamiamo la funzione open della view appena creata
		view.open();
	},

	// Visualizza o nasconde i campi di editing per questa view. 
	toggleView: function() {	
		//riaggiorniamo la vista e cambiamo la classe per la visualizzazione con jQuery
		this.render();
		this.$el.toggleClass("edit");
	},

	//salva i dati modificati dell'indivuduo
	savePerson: function(e){
		e.preventDefault();

		//riprendiamo i dati del nuovo individuo
		var name = $.trim(this.$("[name='name']").val()),
			gender = this.$("[name='gender']").val(),
			occupation = $.trim(this.$("[name='occupation']").val()),
			notes = $.trim(this.$("[name='notes']").val());

	    //se non tutti i campi sono stati compilati, interrompiamo l'operazione
		if(!name.length  || ! occupation.length || !notes.length)
			return;

		//impostiamo i nuovi dati per il model
		this.model.set({
			name: name,
			gender: gender,
			occupation: occupation,
			notes: notes
		});
		//salviamo il model
		this.model.save();
	},

	removeFromDOM: function(){
		//aggiungiamo la classe per l'animazione di uscita, 
		//e alla fine dell'animazione (sappiamo che dura 1 secondo)
		//rimuoviamo l'elemento DOM dal documento
		var that = this;
		that.$el.addClass("hinge");
		setTimeout(function(){
			that.remove();
		}, 1010);		
	},

	// Rimuove la persona distruggendo il relativo model.
	deletePerson: function() {
		this.model.clear();
	}

});

 La view del modal delle informazioni aggiuntive

var ModalView = Backbone.View.extend({

	// diciamo a backbone che il tag deve essere una div
	tagName:  "div",

	//settiamo la classe da impostare al tag li per usare gli stili bootstrap e l'animazione in entrata
	className: "modal fade",

	template: "#modal-template",

	initialize: function() {
		//compiliamo il template in una variabile
		this.template = _.template($(this.template).html());

		//rimuoviamo il modal dal DOM quando esso viene nascosto
		this.$el.on("hidden.bs.modal", function(){
			this.remove();
		});
	},

	// Effettua il render dei contenuti del markup della view nella lista.
	render: function() {
		$(this.el).html(this.template(this.model.toJSON()));		
		return this;
	},

	open: function(){
		this.$el.modal("show");
	}

});

 La view dell’applicazione

//definiamo la view dell'app intera
var AppView = Backbone.View.extend({

		//a differenza della view dell'individuo, dove impostavamo 
		//quale elemento generare al'inizializzazione, qui comunichiamo 
		//quale oggetto già aesistente utilizzare come markup
		el: "body",

		// Deleghiamo gli eventi per la creazione di un nuovo 
		//individuo (il funzionamento ed i selettori sono come quelli di jQuery).
		events: {
			"submit #add-form":  "create"
		},

		// Nella funzione di inizializzazione osserviamo l'evento add 
		//della collection legata a questa view, per richiamare la funzione che 
		// inserisce un nuovo elemento nella lista DOM
		initialize: function() {

			var todos = this.collection;

			//deleghiamo gli eventi della collection alle relative funzioni 

			//evento che si verifica quando un nuovo model viene aggiunto alla collection
			// l'ultimo parametro è una funzione alla quale viene passata l'istanza del model appena aggiunto
			// alla collection
			this.listenTo(this.collection, 'add', this.addPerson);

			//richiamiamo la funzione che aggiunge gli elementi all alla lista
			this.addElements();
		},

		// funzione che ogni crea una nuova view ed agigunge 
		// l'elemento generato dal render alla lista
		addPerson: function(personModel) {			
			//creaiamo una nuova istanza della view della persona passando come model quello appena creato
			var view = new PersonView({model: personModel});
			this.$(".list-group").append(view.render().el);
			//aggiungiamo la classe per l'animazione
			view.$el.addClass("fadeInLeftBig");		
		},

		// Aggiunge nella lista tutti gli elementi della collection di individui.
		addElements: function() {
			this.collection.each(this.addPerson);
		},

		// funzione che aggiunge un nuovo model con i dati del form alla collection
		create: function(e) {
			e.preventDefault();
			//riprendiamo i dati del nuovo individuo
			var name = $.trim(this.$("[name='name']").val()),
				gender = this.$("[name='gender']").val(),
				occupation = $.trim(this.$("[name='occupation']").val()),
				notes = $.trim(this.$("[name='notes']").val());

		    //se non tutti i campi sono stati compilati, interrompiamo l'operazione
			if(!name.length  || ! occupation.length || !notes.length)
				return;

			//aggiungiamo il model alla collection
			this.collection.create({
				name: name,
				gender: gender,
				occupation: occupation,
				notes: notes
			});

			//resettiamo il form dopo la creazione
			this.$("input, textarea").val('');
			this.$("[name='gender']").val('M');
		}
	});

Avviamo la nostra javascript web application!

Infine, per instanziare i nostri componenti ed avviare l’applicazione, ci serviremo del seguente codice javascript:

// nel momento in cui jQuery è pronto, inizializiamo i nostri componenti 
jQuery(function ($) {
	//creiamo una nuova istanza per la collection degli individui con due models
	var persons = new PersonList([
		{
			name: "Mark Zuckerberg",
			gender: "M",
			occupation: "Sviluppatore",
			notes: "Il creatore di Facebook"
		},
		{
			name: "Giacomo Freddi",
			gender: "M",
			occupation: "Sviluppatore",
			notes: "Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni "+
					"web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi,"+
					" ma la sua passione principale è quella della creazione di interfacce front-end e back-end"+
					" utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript."
		}
	]);
	//creiamo una nuova istanza per la vire dell'applicazione 
	//principale associandogli la collection
	var app = new AppView({
			collection : persons
	});
});

Stili e CSS

Come è possible notare scaricando i sorgenti, al fine di rendere il tutto un po più piacevole all’utente, abbiamo inserito degli effetti CSS3 per animare l’inserimento e l’eliminazione di ogni record dalla lista; il codice utilizzato proviene dalla libreria animate.css, e prevede un effetto di entrata con fade da sinistra nel momento dell’inserimento, mentre un elemento di “caduta” nel momento della eliminazione.

Abbiamo inoltre reso il tutto responsive grazie al sistema di griglie di Boostrap 3.

Divertiti con i sorgenti!