{"id":12031,"date":"2016-11-24T10:38:55","date_gmt":"2016-11-24T09:38:55","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=12031"},"modified":"2016-11-24T10:39:58","modified_gmt":"2016-11-24T09:39:58","slug":"introduzione-a-knockout-js","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/introduzione-a-knockout-js\/","title":{"rendered":"Introduzione a Knockout.js"},"content":{"rendered":"

Al giorno d’oggi, il linguaggio Javascript permette alle pagine web di fare ben altro che comuni interazioni lato client. Una delle attivit\u00e0 sicuramente\u00a0in voga al momento \u00e8 lo\u00a0sviluppo di\u00a0web app<\/strong>,\u00a0una tipologia di applicazione informatica che vive all’interno di un browser, viene invocata come una normale pagina web, ma contiene codice Javascript con cui l’utente interagisce con un sistema remoto, tipicamente un backend<\/em> su server che offre API in rete. Ci\u00f2 che anima le web app sono framework Javascript che offrono funzionalit\u00e0 interessanti, architetture applicative in cui disporre componenti in modo da offrire efficienza per l’utente e produttivit\u00e0 per il programmatore. Oggi iniziamo a conoscerne uno molto diffuso e apprezzato da anni: Knockout.js<\/strong><\/a>.<\/p>\n

Knockout.js: caratteristiche e vantaggi<\/h2>\n

Innanzitutto non dobbiamo confondere Knockout.js con altre librerie fondamentali come jQuery che nasce con lo scopo di semplificare l’accesso alla struttura DOM della pagina web. Knockout.js offre un insieme di strumenti applicativi per diminuire \u00a0notevolmente la quantit\u00e0 di codice da scrivere.<\/p>\n

Un elemento che l’ha reso famoso \u00e8 il data-binding<\/strong>, con cui possiamo legare tra loro un elemento visuale – pensiamo ad un campo input di un form – ed una variabile del codice Javascript. Il loro legame sar\u00e0 bidirezionale pertanto il valore della variabile apparir\u00e0 sempre aggiornato\u00a0nell’elemento visuale seguendone ogni\u00a0modifica e, analogamente, ogni nuovo input inserito tramite il medesimo campo form verr\u00e0 immediatamente immesso\u00a0nella variabile. Se si pensa al tempo speso per anni a passare valori dal form alle variabili e viceversa si intuisce quanto il data binding acceleri il lavoro dello sviluppatore.<\/p>\n

Il modo in cui vengono mantenute queste dipendenze \u00e8 l’utilizzo di un particolare tipo di oggetti detti observables<\/strong>: una volta che un elemento della pagina viene\u00a0definito “osservabile”, Knockout.js segue\u00a0l’evoluzione dei suoi valori e attua\u00a0le modifiche di cui l’abbiamo\u00a0incaricato in base alla configurazione assegnata\u00a0al data-binding.<\/p>\n

L’architettura posta alla base di Knockout.js – adottata con successo\u00a0da altri ottimi framework Javascript – \u00e8 il Model-View-ViewModel<\/strong> che permette di gestire in maniera strutturata l’interfaccia utente per\u00a0tutto il suo ciclo di vita, dalla prima visualizzazione fino al termine del suo utilizzo.<\/p>\n

Iniziamo ad usare Knockout.js con un primo esempio di data-binding<\/em>. Innanzitutto scarichiamo\u00a0il framework: possiamo farlo manualmente dal sito ufficiale o tramite bower<\/em>, le istruzioni delle diverse possibilit\u00e0 sono comunque contenute nell’apposita pagina dei Downloads<\/a>\u00a0dal sito ufficiale del progetto. Knockout.js \u00e8 una libreria in puro Javascript quindi non necessita di ulteriori dipendenze.<\/p>\n

L’esempio: Echo app<\/h2>\n

L’esempio che proponiamo qui \u00e8 un classico Echo: scriviamo qualcosa in un campo, il suo valore viene automaticamente riflesso in un altro campo. Questo funzionamento, seppur semplice, richiederebbe alcune\u00a0righe di codice Javascript, magari\u00a0addolcite dall’utilizzo di jQuery: qui il funzionamento sar\u00e0 automatico tramite il data-binding di Knockout.js.<\/p>\n

Questo il codice HTML\/Javascript che useremo:<\/p>\n

<html>\r\n<head>\r\n\r\n<\/head>\r\n<body>\r\n<p>Scrivi qua: <input data-bind=\"value: cosascrivi\"><\/input><\/p>\r\n<p>Leggi qua: <span data-bind=\"text: cosaleggi\"><\/span><\/p>\r\n<script type='text\/javascript' src=\"js\/knockout-3.4.0.js\"><\/script>\r\n  <script type='text\/javascript'>\r\n\r\n  function viewModel(){\r\n  cosascrivi=ko.observable(\"testo di esempio\");\r\n  cosaleggi=ko.computed(function(){ return cosascrivi();});\r\n}\r\n\r\n  ko.applyBindings(viewModel);\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Nel codice troviamo, due semplici campi HTML, seguiti dal codice Javascript che inizia proprio con l’inclusione della versione di Knockout.js che abbiamo\u00a0scaricato.<\/p>\n
Notiamo, per prima cosa, che i due elementi HTML inseriti consistono uno in\u00a0un campo, in cui inseriremo un valore, e l’altro in uno span che delimita l’area in cui vorremo vedere apparire lo stesso valore. Questi due elementi sono contraddistinti dall’attributo data-binding<\/em> richiesto dalla libreria. Come si pu\u00f2 vedere il suo valore \u00e8 composto da due parti:<\/p>\n
<input data-bind=\"value: cosascrivi\"><\/pre>\n
La prima parte indica il tipo di data-binding da attuare – in questo caso value –<\/em>\u00a0che indica un valore raccolto in input che verr\u00e0 passato ad una variabile Javascript: tale variabile sar\u00e0 quella indicata nella seconda parte del valore, in questo caso si chiama\u00a0cosascrivi<\/em>.<\/p>\n
Il binding dell’elemento span sar\u00e0 invece di tipo text<\/em> in quanto ricever\u00e0 un valore dalla variabile indicata, di nome cosaleggi<\/em>.<\/p>\n
Le variabili in questione saranno definite nel ViewModel<\/strong> scritto in Javascript: lo si pu\u00f2 fare come funzione – come abbiamo fatto noi – o sotto forma di oggetto.<\/p>\n
Per definire un ViewModel dobbiamo intanto specificare quali variabili saranno degli observable: lo facciamo tramite il metodo observable<\/em>, messo a disposizione dall’oggetto ko<\/strong> che per noi rappresenta il punto di accesso al framework Knockout.js.<\/p>\n
Notiamo che il secondo oggetto “osservabile” \u00e8 creato tramite il metodo computed<\/em> in quanto viene calcolato di volta in volta: in questo caso il calcolo \u00e8 la semplice restituzione del valore impresso nella variabile cosascrivi<\/em> ma potrebbe essere un’operazione di qualsiasi genere.<\/p>\n
Fondamentale ricordare alla fine di invocare il metodo applyBindings<\/em> che determina l’aggancio tra ViewModel e interfaccia.<\/p>\n
In questo tutorial, abbiamo conosciuto il data-binding di Knockout.js apprendendone i principi base con un esempio molto semplice: prossimamente, ne approfondiremo lo studio vedendolo al lavoro in una web app dal funzionamento pi\u00f9 completo.<\/p>\n","protected":false},"excerpt":{"rendered":"
Al giorno d’oggi, il linguaggio Javascript permette alle pagine web di fare ben altro che comuni interazioni…<\/p>\n","protected":false},"author":561,"featured_media":12589,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[1538,1699,1700,16,1598],"class_list":["post-12031","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial-pratici","tag-javascript","tag-knockout-js","tag-single-page-application","tag-web-app","tag-web-developers"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=12031"}],"version-history":[{"count":11,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12031\/revisions"}],"predecessor-version":[{"id":12590,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12031\/revisions\/12590"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media\/12589"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=12031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=12031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=12031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}