• Programmazione Android
  • CORSI ONLINE
  • Web Agency

Logo

Corsi di programmazione web e mobile online
Navigation
  • Home
  • CORSI ONLINE
  • Tutorial Pratici
  • GUIDE COMPLETE
    • Corso completo di C
    • Corso videogame con Cocos2d
    • Programmazione Cocoa Touch
  • Sezioni
    • Libri e manuali
    • Tips & Tricks
    • Risorse utili
    • Strumenti di Sviluppo
    • Materiale OpenSource
    • Framework
    • Guide Teoriche
    • Guide varie
    • Grafica e Design
    • iPad
    • News
    • Video Tutorial
    • Windows Phone
  • Pubblicità
  • About
    • Chi siamo
    • Pubblicazioni
    • Collabora
    • Sostieni devAPP

Knockout.js: vediamolo al lavoro con un esempio pratico

By Giuseppe Maggi | on 14 Dicembre 2016 | 0 Comment
Senza categoria

In un articolo precedente, abbiamo introdotto il framework Knockout.js e le sue peculiarità principali, tra cui:

  • l’architettura basata sul patten Model-View-ViewModel (MVVM) che permette di separare la logica di presentazione dei dati, il layout e la logica di business dell’applicazione;
  • il databinding tramite il quale si può aggiornare automaticamente l’interfaccia utente  in base ai dati contenuti nel Model e viceversa;
  • gli observables che attuano il databinding in pratica.

In questo post, vedremo il framework al lavoro in un esempio più completo dove il layout sarà impostato con il  framework Bootstrap: il codice può essere scaricato in formato zip.

L’interfaccia apparirà come nell’immagine seguente:

knockoutjs-bootstrap-javascript_img_01

e sarà costituita da tre pannelli:

  • “Inserimento”: contenente un form per l’introduzione di nuovi dati relativi ad una persona. Per ogni soggetto, saranno registrati un nome, un cognome, l’età, la disponibilità di un’automobile e lo stato civile;
  • “Elenco”: un elenco dinamico in cui verranno mostrati gli oggetti inseriti;
  • “Statistiche”: una piccola griglia che riporta statistiche sugli inserimenti come il numero di persone registrate e l’età media.

L’interfaccia

L’interfaccia utente, come detto, è stata progettata con Bootstrap, un framework CSS inventato da Twitter, uno degli strumenti più usati nel web design. Questo quanto apparirà nel file HTML:

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gestione del personale</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/stile.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 </head>
 <body>
	 <div class="container">
		<div class="col-md-8 blocco">
			<div class="intestazione">
			Inserimento
			</div>
			<div class="corpo">
				<form>
				  <div class="form-group row">
					<label class="col-md-2">Cognome</label>
					<div class="col-md-9">
						<input type="text" class="form-control" data-bind="value: cognome">
					</div>
				  </div>
				  <div class="form-group row">
					<label class="col-md-2">Nome</label>
					<div class="col-md-9">
						<input type="text" class="form-control" data-bind="value: nome">
					</div>
				  </div>
				  <div class="form-group row">
					<label class="col-md-2">Età</label>
					<div class="col-md-3">
						<input type="text" class="form-control" data-bind="value: eta">
					</div>
				  </div>
				  <div class="form-group row">
					<label  class="col-md-3"><input type="checkbox" data-bind="checked: automunito"> Automunito</label>
					<div class="col-md-9">
					<label>Stato civile</label>
					<select data-bind="value: statoCivileSelezionato, options: elencoStatoCivile, optionsCaption: '-- Scegliere uno Stato Civile --'"></select>
					 </div>
				  </div>
				  <div class="form-group row">
				    <div class="text-center buttons">
						<button type="submit" class="btn btn-default" data-bind="click: aggiungiPersona">Salva</button>
						<button type="submit" class="btn btn-default" data-bind="click: pulisciForm">Pulisci</button>
					</div>
				  </div>
				</form>
			   </div>
			<div class="intestazione">
			Elenco
			</div>
			<div class="corpo">
				<div data-bind="foreach: elenco" class="scrollable" >
					<div class="list-group-item t1"><span data-bind="text: nome"></span> <span data-bind="text: cognome"></span> di anni <span data-bind="text: eta"></span></div>
				</div>
			</div>
		</div>
		<div class="col-md-4 blocco">
			<div class="intestazione">
			Statistiche
			</div>
			<div>
				<div class="t1 col-md-6">
					Numero inserimenti
				</div>
				<div class="t2 col-md-6">
					<span data-bind="text: elenco().length">0</span>
				</div>
				<div class="t1 col-md-6">
					Età media
				</div>
				<div class="t2 col-md-6">
					<span data-bind="text: etaMedia">0</span>
				</div>
			</div>
		</div>
	 </div>
 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script type='text/javascript' src="js/knockout-3.4.0.js"></script>
  <script type='text/javascript'>
    // codice relativo a Knockout.js
  </script>
 </body>
</html>

Il codice dell’esempio è qui mostrato integralmente, manca solo la porzione di Javascript che verrà affrontata nel paragrafo seguente.

Per poterlo eseguire, è necessario:

  • scaricare Bootstrap o metterlo a disposizione tramite CDN;
  • scaricare Knockout.js;
  • mettere a disposizione jQuery in qualche maniera.

Tutte le librerie ed i framework necessari verranno introdotti con i necessari tag <script> e, quanto scaricato, sarà organizzato in due cartelle che, nel nostro esempio, si chiamano js per il codice Javascript e css per i fogli di stile. A proposito di quest’ultimo aspetto, abbiamo creato un nostro foglio di stile – collegato al HTML precedente – denominato stile.css il cui contenuto è il seguente:

.blocco
	{
		padding: 5px;
	}
	
	.intestazione
	{
		padding: 5px;
		background-color: #cc5200;
		color: #FFFFFF;
		font-weight: bold;
		font-size:16px;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}
	.corpo
	{
		background-color: #ffa366;
		padding-top: 5px;
		padding-right: 5px;
		padding-left: 5px;
		margin-bottom: 5px;
	}
	
	.row-bgc
	{
		background-color: #ffa366;
	}
	
	.buttons{
		padding:8px
	}	

	.scrollable {
		height: auto;
		max-height: 200px;
		overflow-x: hidden;
	}
	
	.t1 {
		background-color: #FF6600;
		padding: 10px;
		color: #FFFFFF;
		font-weight: bold;
	}
	.t2 {
		background-color: #FF8533;
		padding: 10px;
		color: #FFFFFF;
		font-weight: bold;
	}

Gestione dei dati con Knockout.js

Il codice Javascript essenzialmente sarà diviso in tre porzioni:

  • creeremo una funzione che servirà per definire gli oggetti di tipo Persona, ognuno dei quali ospiterà i dati inseriti tramite l’utilizzo del form;
  • un’altra funzione fornirà il ViewModel che utilizzeremo;
  • infine, tramite il metodo dell’oggetto ko agganceremo il nostro ViewModel all’interfaccia utente.

Schematicamente sarà questa la struttura, successivamente approfondiremo il ViewModel nel dettaglio:

function Persona(nome, cognome, eta, automunito, statocivile) {
		var self = this;
		self.nome = nome;
		self.cognome = cognome;
		self.eta = eta;
		self.automunito = automunito;
		self.statocivile = statocivile;
	}
	
	function GestionePersonale() {
		/*
                 * ViewModel: lo approfondiremo a breve
                 */
	}
	
	ko.applyBindings(new GestionePersonale());

Nel ViewModel dovremo innanzitutto definire alcune proprietà che saranno rappresentate da observable, quel tipo di oggetti – di cui abbiamo parlato nel precedente articolo – il cui valore viene costantemente sincronizzato con specifici controlli utente dell’interfaccia.

function GestionePersonale() {
		var self = this;
		
		self.elenco = ko.observableArray([]);
		
		self.cognome=ko.observable();
		self.nome=ko.observable();
		self.eta=ko.observable();
		self.automunito=ko.observable();
		self.elencoStatoCivile=ko.observableArray(['coniugato', 'celibe/nubile', 'separato/divorziato']);
		self.statoCivileSelezionato=ko.observable();
		self.totaleEta=0;
		self.etaMedia=ko.observable(0);
		self.quantisono=ko.observable(0);
	
		
		self.aggiungiPersona = function() {
			self.elenco.push(new Persona(self.nome(),self.cognome(), self.eta(),self.automunito(), self.statoCivileSelezionato()));
			self.totaleEta+=parseInt(self.eta());
			self.etaMedia(self.totaleEta/self.elenco().length);
			self.pulisciForm();
		}
		
		self.pulisciForm=function()
		{
			self.nome("");
			self.cognome("");
			self.automunito(false);
			self.eta("");
			self.statoCivileId=0;
		}
	}

Si noti, tra l’altro, che ci sono alcuni observable definiti tramite il metodo observableArray che crea un array di oggetti observable. Ciò è utile quando si ha una lista di elementi che deve in qualche maniera essere riprodotta nell’interfaccia.

Qui usiamo due observableArray: uno per contenere i vari oggetti Persona creati che saranno poi visualizzati iterativamente in un elenco, l’altro per alimentare il menu a tendina che mostra gli stati civili selezionabili. Il primo di questi due sarà direttamente trasformato in un elenco HTML tramite il seguente binding di tipo foreach:

<div class="corpo">
 <div data-bind="foreach: elenco" class="scrollable" >
  <div class="list-group-item t1"><span data-bind="text: nome"></span> 
      <span data-bind="text: cognome"></span> di anni <span data-bind="text: eta">
      </span>
  </div>
 </div>
</div>

Un binding di questo tipo ha l’effetto di ripetere tutto il testo HTML, inserito all’interno del tag di cui fa parte, tante volte quante sono gli oggetti presenti nell’observableArray attivando al suo interno gli eventuali binding presenti. I due ulteriori metodi presenti nel ViewModel svolgeranno compiti piuttosto prevedibili:

  • aggiungiPersona crea un nuovo oggetto Persona con i dati del form e lo inserisce nell’array di oggetti “osservabili” e, successivamente, aggiorna i dati per le statistiche. La sua attivazione è indotta da un binding di tipo click, collegato al pulsante con etichetta “Salva”;
    <button type="submit" class="btn btn-default" data-bind="click: aggiungiPersona">Salva</button>
  • pulisciForm pulisce i campi del form dopo un avvenuto inserimento. Esso, oltre che dall’interno del metodo aggiungiPersona può essere invocato tramite binding di tipo click con il pulsante “Pulisci”.

Conclusioni

Sebbene l’esempio non sia dei più complessi mostra in particolare che:

  • Knockout.js può entrare a far parte dei vostri progetti integrandosi con tutto ciò che solitamente utilizzate: si veda, ad esempio, la presenza di Bootstrap per l’interfaccia;
  • la struttura del codice è piuttosto snella perchè molte parti scontate vengono sempre assolte dal framework.

Knockout.js è un tipico figlio dell’ultima generazione dei prodotti Javascript: utile, rapido, comodo  e velocissimo da attivare.

Share this story:
  • tweet

Tags: javascriptknockout.jsTutorial Praticiweb developers

Recent Posts

  • Parte il percorso programmatori iOS in Swift su devACADEMY.it

    20 Dicembre 2017 - 0 Comment
  • Android, crittografare dati velocemente con Encryption

    24 Settembre 2018 - 0 Comment
  • Sql2o, accesso immediato ai database tramite Java

    3 Settembre 2018 - 0 Comment
  • Okio, libreria per ottimizzare l’input/output in Java

    27 Agosto 2018 - 0 Comment

Related Posts

  • Iniziamo a programmare con micro:bit

    1 Marzo 2018 - 0 Comment
  • micro:bit, un microntroller per imparare a programmare già dai 7 anni

    28 Febbraio 2018 - 0 Comment
  • jsGrid: plugin jQuery per mostrare i dati con efficienza

    23 Febbraio 2018 - 0 Comment

Author Description

No Responses to “Knockout.js: vediamolo al lavoro con un esempio pratico”

Leave a Reply

Your email address will not be published. Required fields are marked *


*
*

Corso online di programmazione android e java

SEZIONI

  • Android
  • Comunicazioni
  • Contest
  • Corsi ed Eventi
  • Corso completo di C
  • Corso programmazione videogiochi
  • Framework
  • Grafica e Design
  • Guida rapida alla programmazione Cocoa Touch
  • Guide Teoriche
  • Guide varie
  • iPad
  • Le nostre applicazioni
  • Libri e manuali
  • Materiale OpenSource
  • News
  • Pillole di C++
  • Progetti completi
  • Risorse utili
  • Strumenti di Sviluppo
  • Swift
  • Tips & Tricks
  • Tutorial Pratici
  • Video Tutorial
  • Windows Phone

Siti Amici

  • Adrirobot
  • Allmobileworld
  • Apple Notizie
  • Apple Tribù
  • Avvocato360
  • Blog informatico 360°
  • bubi devs
  • fotogriPhone
  • GiovaTech
  • iApp-Mac
  • iOS Developer Program
  • iPodMania
  • MelaRumors
  • Meritocracy
  • SoloTablet
  • TecnoUser
  • Privacy & Cookie Policy
©2009-2018 devAPP - All Rights Reserved | Contattaci
devAPP.it è un progetto di DEVAPP S.R.L. - Web & Mobile Agency di Torino
Str. Volpiano, 54 - 10040 Leini (TO) - C.F. e P.IVA 11263180017 - REA TO1199665 - Cap. Soc. € 10.000,00 i.v.

devACADEMY.it

Vuoi imparare a programmare?

Iscriviti e accedi a TUTTI i corsi con un’unica iscrizione.
Oltre 70 corsi e migliaia di videolezioni online e in italiano a tua disposizione.

ISCRIVITI SUBITO