Różnica między jsRender i jsViews

Question

Więc szablony jQuery nigdy nie przejdą testu beta, a jsRender i jsViews mają wypełnić pustkę. Sprawdziłem przykłady opublikowane przez Boris Moore na this page, ale nie dostaję różnicy między jsRender i jsViews. Ponadto Boris użył jednego z przykładów drugiego, aby dodać do zamieszania. Pytanie więc, w jaki sposób dwa z nich są powiązane (lub inne)?

Answer 1

JsRender jest silnikiem szablonowym. JsViews jest mechanizmem wiążącym dane.

JsRender pomaga renderować HTML za pomocą szablonu (statyczny HTML/CSS z osadzonymi tokenami, które są zastępowane danymi). Obsługuje prostą logikę, renderowanie wartości i funkcje niestandardowe.

JsViews, zbudowany na bazie JsRender, dodaje obserwowalność do obiektów/właściwości. Umożliwia to powiązanie obiektów json z celami HTML i uzyskanie wiążącego powiązania danych w dwóch kierunkach.

Oczywiście jest ich więcej, ale to jest 60 sekundowa odpowiedź. To pomaga?

Answer 2

jsRender to tylko szablony, w których jsViews to szablony, ale także powiązanie danych. Więc jeśli chcesz tylko wyprowadzać dane z obiektu, listy lub klasy, użyjesz jsRender. Stąd wyrenderuj szablon. jsViews, byłby do wiązania danych w czasie rzeczywistym, wśród wielu innych wspaniałych funkcji. Tak więc, jeśli wyrenderowałeś szablon używający go i miał pole, które było databoundem, kiedy zmodyfikowałeś go po stronie klienta, to faktycznie modyfikuje on obiekt do tego, z którego go dostałeś.

Na przykład, oto prawdziwe wykorzystanie tego w tym małym urywku z mojej pracy.

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

I to jest, gdy jest on stosowany w HTML

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

Tak w każdym wystąpieniu tego obiektu, to sprawia, że ​​szablon. Mamy tu również funkcje pomocnicze. Można ich używać do takich rzeczy, jak zwracanie wartości logicznej dla testu, a następnie działanie na danych jak wrappper w czasie wiązania. Mam nadzieję, że pomoże to dodać do już idealnej odpowiedzi udzielonej przed tą odpowiedzią.

Answer 3

Od docs:

JsRender służy do renderowania szablonów do strun, gotowy do wstawkę w DOM.

Jest również stosowany przez platformę JsViews, który dodaje wiążących JsRender szablonów danych, a także zapewnia pełnoprawną platformą MVVM dla łatwo tworzenia interaktywnych opartych na danych pojedyncza strona aplikacje i strony internetowe.