progressive enhancement con KnockoutJS

Question

Diciamo che abbiamo dati come segue

var data = { 
    facets: [{ 
    name : "some name", 
    values: [{ 
     value: "some value" 
    }] 
    }] 
}; 

Possiamo facilmente rappresentare questo come un modello di vista legato ad un modello di eliminazione diretta come segue:

<ul data-bind="foreach: facets">  
    <li>  
    <span data-bind="text: name"></span> 
    <ul data-bind="foreach: values">    
     <li data-bind="text: value"></li>  
    </ul> 
    </li> 
</ul> 

La domanda è: come possiamo ottenere lo stesso risultato usando il miglioramento progressivo? Ovvero avendo inizialmente il rendering del template sul lato server e quindi vincendo il modello ad eliminazione diretta e il modello di visualizzazione a quel rendering.

Un modello lato server semplice sarebbe simile a questa:

<ul>  
    <li>  
    <span>some name</span> 
    <ul>    
     <li>some value</li>  
    </ul> 
    </li> 
</ul> 

ho esplorato alcune possibilità differenti:

• Uno è creare un modello knockout e un modello lato server, e generare dinamicamente il modello di visualizzazione Knockout analizzando il DOM per il modello lato server. In questo modo, solo il modello Knockout sarà visibile quando JavaScript è abilitato e solo il modello lato server sarà visibile se JavaScript è disabilitato. Potrebbero essere abbinati in modo da renderli identici.

• Un altro approccio consiste nell'applicare i collegamenti per ciascun elemento nell'array di facet separatamente all'elemento DOM esistente per tale facet. Tuttavia, questo è ancora solo un livello profondo e non funziona per gli elementi nidificati.

Nessuno di questi approcci sembra piuttosto pulito. Un'altra soluzione potrebbe essere quella di scrivere un'associazione personalizzata che gestisca l'intero rendering e riutilizza gli elementi esistenti, se possibile.

Altre idee?

Answer 1

Ho esplorato diversi approcci qui, compreso quello di generare un modello anonima dal primo elemento, come descritto qui:

http://groups.google.com/group/knockoutjs/browse_thread/thread/3896a640583763d7

o la creazione di legami separati per ciascun elemento della matrice attraverso un legame personalizzato come

ko.bindingHandlers.prerenderedArray = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     var binding = valueAccessor();    
     binding.firstTime = true; 

     $(element).children().each(function(index, node) {     
      var value = ko.utils.unwrapObservable(binding.value)[index];       
      ko.applyBindings(value, node); 
     }); 

     return { 'controlsDescendantBindings': true };    
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {    
     var binding = valueAccessor(); 
     if (binding.firstTime) { 
      binding.firstTime = false; 
      return; 
     }    

     $(element).children().remove(); 
     ko.applyBindingsToNode(element, { template: { name: binding.template, foreach: binding.value }}, viewModel) 
    } 
};  

che applica un legame specifico a ciascun elemento e quindi sul primo aggiornamento sostituisce il contenuto con un ordinario vincolo foreach. Questo approccio significa che devi ancora avere due modelli. Entrambi implicano l'inizializzazione dello stato tramite un JSON reso dal server.

L'approccio corrente che ho scelto di utilizzare (ancora soggetto a modifiche, però) è di mettere tutti i modelli Knockout all'interno dei tag script in modo che non vengano mai visualizzati nei browser NoJS.I modelli NoJS sono resi come contenuti di un div sul lato server. Non appena viene eseguito il rendering del modello Knockout, il contenuto del div sarà sostituito dal modello Knockout nei tag dello script. Puoi modellarli in modi identici/simili per rendere la transizione senza interruzioni e, se ciò non è possibile, nascondere il modello noJS tramite CSS.

Alla fine, sono giunto alla conclusione che Knockout.js e il miglioramento progressivo non funzionano molto bene insieme, uno dovrebbe scegliere l'altro, ovvero costruire alcune parti dell'applicazione che richiedono un miglioramento progressivo utilizzando più tradizionale metodi come la manipolazione diretta di jQuery DOM.

Answer 2

Basta aggiungere i vari attributi data- nei modelli lato server. Non fanno male se JavaScript è disabilitato quindi averli non è affatto un problema.

Answer 3

Ho paura che non ci sia un modo pulito per farlo. Personalmente eseguo il rendering della pagina nel backend e poi passo gli stessi dati di contesto al frontend (serializzato come JSON) e configuro Knockout usandolo. Ciò significa che c'è qualche duplicazione. Forse passare il backend a node.js semplificerebbe le cose qui.

Answer 4

here, ho suggerito un collegamento di modello che utilizza l'HTML generato dal server. L'utilizzo è simile al binding Template originale, ad eccezione dei pochi dati-attributi che verranno utilizzati dal binding.

Answer 5

Il miglioramento progressivo è molto più semplice con i dati non in loop come i moduli (come ho scritto qui: http://www.tysoncadenhead.com/blog/using-knockout-for-progressive-enhancement). Personalmente, penso che il looping su più elementi nel DOM e il re-rendering degli stessi sembrerebbe un'implementazione difficile, ma è difficile pensare a qualcosa di meglio.

Answer 6

Ecco il mio esempio, questo esempio di base utilizza un'associazione personalizzata per caricare i valori lato server nel modello di visualizzazione.

Progressive Enhancement with KnockoutJS Infinite Scroll

Il progressive enhancement vincolante

ko.bindingHandlers.PE = { 
    init: function(element, valueAccessor, allBindings) { 
     var bindings = allBindings(); 
     if (typeof bindings.text === 'function') { 
      bindings.text($(element).text()); 
     } 
    } 
};