Do You Know JsRender?

I am new to JsRender, but still felt like discussing with my readers as may be one of you can provide more insights, after all, it’s mutual learning that helps a community.

What is JsRender?

The first thing that I learned is that it’s not an invention but an improvisation of a concept called Templating. We are not talking about server templates here, but the UI templates which are already achieved by jQuery templates. So the history of JsRender revolves around jQuery Templates. The aim of the approach is to achieve fast, robust, and optimized applications. The idea behind jQuery templates is to convert JSON objects to HTML and the same applies to JsRender but differs in the advantages rendered by JsRender which makes it a preferable choice. There is a primary advantage of no dependency on either jQuery or DOM. It supports simple logic, rendering values, and custom functions.

Let’s Work Out An Example

Download JsRender.js from https://github.com/BorisMoore/jsrender.

First of all, we should know the HTML template required and then we will insert data by using variables. After that, we just need to call the render method.

<script id="prodBlockTmpl" type="text/x-jsrender">
{{for Data.CategoryProductData}}
<div class="prodImgnBrief ">
      <div class="prodcateg-details">
          <div class="categProdImg">
             <div class="algnCntr">
                <a href="#" title=""><img 
                  src="{{>ThumbnailImageSrc}}" 
                  alt="{{>ThumbnailImageAlt}}" /></a></div>
               </div>
          <div class="prodcategrating">
                <div class="rating theme2Rating categRating">
                        <span class="star{{>ReviewRating}}">&nbsp;</span>
                  </div>
          </div>
        </div>
</div>
{{/for}}
</script>

ThumbnailImageSrc, ThumbnailImageAlt, ReviewRating are the variables that are used to insert data. Now, call the render method.z

function renderProdsTmpl(jsondata){
//alert(jsondata);
$( ".categprodsWrappr" ).html(
                $("#prodBlockTmpl").render(jsondata)
);

What does JSON data (jsondata) look like?

{
   "ContentEncoding":null,
   "ContentType":null,
   "Data":{
      "CategoryProductData":[
         {
           
            "ThumbnailImageSrc":"/images/image1.png",
            "ThumbnailImageAlt":"image1",           
            "ReviewRating":4,
          },
         {
            "ThumbnailImageSrc":"/images/image2.png",
            "ThumbnailImageAlt":"image2",           
            "ReviewRating":3,
         },
         {
            "ThumbnailImageSrc":"/images/image3.png",
            "ThumbnailImageAlt":"image3",
             "ReviewRating":5,
          },
        ]
   },
   "JsonRequestBehavior":1,
   "MaxJsonLength":null,
   "RecursionLimit":null
}

This JSON will replace the variables with actual data. This article is just a hint of JsRender and its capabilities. Please refer to the following warning before its usage:

• Warning from BorisMoore_jsrender

JsRender is not yet officially beta, though the APIs and code are now stable. JsViews, on the other hand, is still evolving (with a number of powerful features arriving), and its Beta is currently planned for February. Since this could lead to small API changes in JsRender (to accommodate JsViews integration), JsRender will not be declared officially Beta until around the same time.

Often users are confused between JsViews and JsRender, so here is an answer from John Papa, quite popular and voted by most of the people on StackOverflow:

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.

Related Posts

1. C#: Useful JSON in .NET
2. Nullable .NET types
3. UI: jQuery is JavaScript Library