Difference between jsRender and jsViews

Question

So jQuery templates will never get past beta and jsRender and jsViews are supposed to fill the void. I checked out the examples posted by Boris Moore on this page but I don't get the difference between jsRender and jsViews. Moreover Boris has used one in the example of the other to add to the confusion. So the question is how are two of them related (or different)?

Answer 1

JsRender is the templating engine. JsViews is the data binding engine.

JsRender helps you render HTML using a template (static HTML/CSS with embedded tokens that get replaced with data). It supports simple logic, rendering values, and custom functions.

JsViews, which is built on top of JsRender, adds observability to objects/properties. This allows you to link your json objects to HTML targets and get 2 way data binding.

There's more to them, of course, but that's the 60 second answer. Does that help?

Answer 2

jsRender is just templates, where jsViews is templates, but also data binding. So if you just want to output data from an object, list, or class, then you would use the jsRender. Hence, render a template. jsViews, would be for real time data binding, among many other marvelous features. So, if you rendered a template using it, and had a field that was databound, when you modified it in the client side, it is actually modifying the object to that you got it from.

For example, here is a real use of it in this little snippet from my work.

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

And this is where it is used in the HTML

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

So in every occurance of this object, it renders the template. We also have helper functions in here. You can use them for things such as returning a boolean value for a test, and then acting on the data like a wrappper durring bind time. Hopefully this helps add on to the already perfect response answered prior to this response.

Answer 3

From the docs:

JsRender is used for rendering of templates to strings, ready for insertion in the DOM.

It is also used by the JsViews platform, which adds data binding to JsRender templates, and provides a fully-fledged MVVM platform for easily creating interactive data-driven single page apps and websites.