Differenza tra jsRender e jsViews

Question

Quindi i modelli jQuery non andranno mai oltre il beta e jsRender e jsViews dovrebbero riempire il vuoto. Ho controllato gli esempi pubblicati da Boris Moore su this page ma non ho la differenza tra jsRender e jsViews. Inoltre Boris ne ha usato uno nell'esempio dell'altro per aggiungere confusione. Quindi la domanda è: in che modo due sono correlati (o diversi)?

Answer 1

JsRender è il motore dei modelli. JsViews è il motore di associazione dei dati.

JsRender consente di eseguire il rendering HTML utilizzando un modello (HTML statico/CSS con token incorporati che vengono sostituiti con i dati). Supporta logica semplice, valori di rendering e funzioni personalizzate.

JsViews, che si basa su JsRender, aggiunge osservabilità a oggetti/proprietà. Questo ti permette di collegare i tuoi oggetti JSON a target HTML e ottenere il binding dei dati a 2 vie.

C'è di più per loro, ovviamente, ma questa è la risposta di 60 secondi. Questo aiuta?

Answer 2

jsRender è solo modelli, in cui jsViews è modelli, ma anche associazione dati. Quindi, se vuoi solo emettere dati da un oggetto, elenco o classe, allora dovresti usare jsRender. Quindi, rendere un modello. jsViews, sarebbe per l'associazione dei dati in tempo reale, tra molte altre meravigliose funzionalità. Quindi, se hai eseguito il rendering di un modello utilizzandolo e disponendo di un campo che contiene dati, quando lo hai modificato sul lato client, in realtà modifica l'oggetto da cui l'hai ottenuto.

Ad esempio, ecco un vero uso di questo piccolo frammento dal mio lavoro.

//this is the script that handles the template 
<script id="questionResourceTemplate" type="text/x-jquery-tmpl"> 
    <li class="default-{{:IsDefault}}"> 
     <label data-link="visible{:!IsPageSpecific}" class="surv mleft5"><strong>{{:Type}}</strong></label> 
     <label data-link="visible{:IsPageSpecific}" class="surv mleft5"><input type="text" data-link="Type" /></label> 
     <a data-link="visible{:IsDefault}" href="#" action="deletequestionresource">Delete</a> 
     <br /> 
     {^{for QuestionResourceTexts tmpl="#textTemplate" ~parentQuestionResource=#data ~textboxClass="textbox" /}} 
    </li> 
</script> 

E questo è dove viene utilizzato nel codice HTML

<ul class="question-resource-list"> 
    {^{for QuestionResources tmpl="#questionResourceTemplate" ~parentQuestion=#data /}} 
</ul> 

Quindi, in ogni occorrenza di questo oggetto, rende il modello. Abbiamo anche funzioni di supporto qui. Puoi usarli per cose come restituire un valore booleano per un test e poi agire sui dati come un wrappper durante il tempo di binding. Speriamo che questo aiuti aggiungere alla risposta già perfetta risposta prima di questa risposta.

Answer 3

Dalla documentazione:

JsRender viene utilizzato per il rendering di modelli di stringhe, pronti per inserimento nel DOM.

Inoltre, viene utilizzato dalla piattaforma JsViews, che aggiunge l'associazione dati per modelli JsRender, e fornisce una piattaforma MVVM a tutti gli effetti per la creazione di facilmente applicazioni per singola pagina basate sui dati interattivi e siti web.