javascript - Diferencia entre jsRender y jsViews

jquery jquery-templates

Question

Por lo tanto, las plantillas de jQuery nunca pasarán de la versión beta y se supone que jsRender y jsViews llenan el vacío. Revisé los ejemplos publicados por Boris Moore en esta página, pero no veo la diferencia entre jsRender y jsViews. Además, Boris ha usado uno en el ejemplo del otro para aumentar la confusión. Entonces, la pregunta es ¿cómo se relacionan (o son diferentes) dos de ellos?

Answer 1

De la documentación:

JsRender se utiliza para representar plantillas en cadenas, listo para su inserción en el DOM.

También es utilizado por la plataforma JsViews, que agrega enlaces de datos a las plantillas de JsRender y proporciona una plataforma MVVM completa para crear fácilmente sitios web y aplicaciones interactivas de una sola página.

Answer 2

JsRender es el motor de plantillas. JsViews es el motor de enlace de datos.

JsRender lo ayuda a representar HTML utilizando una plantilla (HTML / CSS estático con tokens incrustados que se reemplazan con datos). Admite lógica simple, valores de representación y funciones personalizadas.

JsViews, que está construido sobre JsRender, agrega observabilidad a los objetos / propiedades. Esto le permite vincular sus objetos json a objetivos HTML y obtener enlace de datos de 2 vías.

Hay más para ellos, por supuesto, pero esa es la respuesta de 60 segundos. ¿Eso ayuda?

Answer 3

jsRender es solo plantillas, donde jsViews es plantillas, pero también enlace de datos. Entonces, si solo desea generar datos de un objeto, lista o clase, entonces usaría el jsRender. Por lo tanto, hacer una plantilla. jsViews, sería para enlace de datos en tiempo real, entre muchas otras características maravillosas. Por lo tanto, si representó una plantilla usándola y tenía un campo que tenía un enlace de datos, cuando lo modificó en el lado del cliente, en realidad está modificando el objeto del que lo obtuvo.

Por ejemplo, aquí hay un uso real de esto en este pequeño fragmento de mi trabajo.

//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>

Y aquí es donde se usa en el HTML.

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

Así que en cada ocurrencia de este objeto, representa la plantilla. También tenemos funciones de ayuda aquí. Puede usarlos para cosas tales como devolver un valor booleano para una prueba y luego actuar sobre los datos como un envoltorio durante el tiempo de enlace. Esperemos que esto ayude a añadir a la respuesta ya perfecta respondida antes de esta respuesta.