Knockout containerless binding

Roberto Sarati — Tue, 07 Feb 2012 00:09:47 GMT

In ambito XAML per mostrare una lista di elementi occorre impostare il datacontext di un ItemsControl ad una IEnumerable. L’ItemsControl poi rendererizza la lista in base al DataTemplate specificato nella proprietà ItemTemplate. Per aggiungere oggetti nuovi ho sempre usato ItemTemplateSelector e/o CompositeCollection, ma la presenza di un container l’ho sempre considerata obbligatoria (correggetemi se sbaglio).

Ho considerato l’assioma valido anche in Knockout, ma non è così. Con knockout è possibile scrivere un “contenitore fittizio” tramite commenti:

Tramite questa feature è possibile (come nel mio caso particolare) creare una tabella con un numero di colonne variabili:

<table id="classificationTable">
     <thead>
         <tr>
             <td>Rank</td>
             <td>Country</td>
             <td>Full Name</td>
             <!-- ko foreach: batteries -->
                 <td>R<span data-bind="text: $data"></span></td>
             <!-- /ko -->
             <td>TOT</td>
         </tr>
     </thead>
     <tbody data-bind="foreach: positions">
         <tr>
             <td data-bind="text: rank"></td>
             <td data-bind="text: country"></td>
             <td data-bind="text: fullname"></td>
             <!-- ko foreach: regularShots -->
                 <td data-bind="text: $data"></td> 
            <!-- /ko -->
             <td data-bind="text: totalRegularPoints"></td>
         </tr>
     </tbody>
 </table>

Comodo, utile, veloce.

Ps: gli elementi <td> chiudeteli sempre con un tag </td>, non scriveteli con un tags self-closing <td data-bind="" /> altrimenti KnockoutJs potrebbe dare qualche problemino (e non solo lui)

Knockout 2.0 released

Roberto Sarati — Thu, 22 Dec 2011 02:09:14 GMT

Anche se leggermente OT rispetto al mondo .net, notifico l'uscita di Knockout v2.0.0; Per chi non sapesse cosa fosse, è un framework javascript che semplifica l'applicarazione del pattern MVVM (oramai noto in xaml) in javascript+html.

Tra le nuove caratteristiche che ho notato velocemente, cito le seguenti:

ViewModel: negli esempi ora è rappresentato da una funzione (=oggetto)
Computed properties: ko.dependentObservable è deprecato, ora è preferibile utilizzare ko.computed.
Templating: poiché jQuery.tmpl non è più in sviluppo, è stato modificato il motore di templating. Ora si può usare il binding di tipo foreach e altre tecniche. Probabilmente questa è una delle breaking changes maggiori per questa release. [+-datatemplate in xaml]
Accesso a "DataContext" relativi: è possibile utilizzare $data (contesto corrente), $parent (contesto padre), $parents[i] (i-esimo ancestor), $root (contesto root) [+- relativesource findancestor in xaml]
Trottling: è possibile propagare una modifica del viewmodel alle altre proprietà (per esempio le computed properties) dopo un determinato periodo di tempo. Si può specificare con:
ko.computed(function() {}).extend({trottle: 1000}); //attende 1000ms a ricalcolare la proprietà computed.

Sono state aggiunte altre feature non citate e, osservando il forum ufficiale, è stato effettuato anche un discreto periodo di sviluppo per migliorare le prestazioni nei vari browser attualmente sul mercato.

E io che 'odiavo' javascript...