Knockoutjs e il pattern MVVM lato client - Introduzione

In questi giorni sto sperimentando l'utilizzo della libreria Knockoutjs per realizzare un box di offerte.
Nel post precedente descrivevo la parte server del progetto e il caricamento dei dati via jquery.

Avendo sperimentato i vantaggi dell'utilizzo del ViewModel nella costruzione delle pagine ho pensato se fosse possibile fare una cosa simile anche sul client realizzando un Model View ViewModel lato client.

Googolando un pò ho trovato Knockoutjs leggendo la documentazione mi è sembrata la soluzione al problema che volevo risolvere.

E' possibile definire un viewmodel, definire l'associazione del viewmodel con gli elementi della pagina e infine eseguire il binding. E' definito anche un sistema di templating con un minimo di funzioni di elaborazioni quali istruzioni condizionali e cicli.

<div class="Informazioni">
        <div style="float:left; width: 150px; margin:0px 14px 0px 14px;">
            <strong>1 adulto + 1 bambino</strong>
            <div data-bind="template: { name: 'offerta-template', foreach: primoBox}"></div>
            </div>

La libreria sfrutta l'attributo data-bind, l'istruzione template istituisce l'associazione del div ad un blocco di codice che verrà ripetuto per quanti oggetti verranno trovati nel vettore "primoBox".

 <script type="text/html" id="offerta-template">

<a data-bind="attr: {href: urlInfoStruttura}"><img data-bind="attr: {src: imagePath}" border="0" /></a><br />

<p><a data-bind="attr: {href: urlInfoStruttura}"><h2><span data-bind="text: nomeStruttura" style="font-size: 11px;"></span></h2></a>

<span data-bind="text: localitaStruttura" style="font-size: 11px; color: #E15204"></span><br />

<strong>da <span data-bind="text: puntiStep" style="color: #E15204"></span> <span style="color: #E15204">punti</span></script>

</p>

</script>

 Questo blocco definisce il template, si può notare l'associazione tra l'html e le proprietà del viewmodel ad esempio il tag a avrà come valore dell'attributo href il valore della proprietà urlInfoStruttura associato all'oggetto attuale del vettore primoBox.

var HomeViewModel = {

primoBox: ko.observableArray([]),

secondoBox: ko.observableArray([]),

terzoBox: ko.observableArray([]),

quartoBox: ko.observableArray([]),

offerteCompleto: ko.observableArray([]),

};

questa è la definizione del viewmodel associato alla pagina.

ko.dependentObservable(function() {

$.getJSON("http://..?num=8&callback=?",  

function(data) {

 CaricaDati(data);

})},HomeViewModel);

ko.applyBindings(HomeViewModel);

Questo blocco di codice è il cuore del gioco.  Abbiamo il caricamento di un json con i dati e l'associazione della pagina al viewmodel, infine il binding dei dati. La funzione carica dati è quella che prende i dati dal json e carica le proprietà di HomeViewModel. Ad esempio:

HomeViewModel.offerteCompleto.push({nomeStruttura: item.NomeStruttura, imagePath: imgpath, idStruttura: item.IdStruttura, localitaStruttura: item.Localita,puntiStep: "2000", urlInfoStruttura: urlitem});

 Knockoutjs è un file da 39 kb per ora il grosso vantaggio è una maggiore leggibilità e la migliore modularità del codice... Ma è solo l'inizio.