Knockout containerless binding

In ambito XAML per mostrare una lista di elementi occorre impostare il datacontext di un ItemsControl ad una IEnumerable<T>. 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:

<!-- ko ... -->
<!-- /ko -->

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>

Pubblicità

Knockout 2.0 released

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…