CODE SPREAD

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

What is JsRender?

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 been achieved by JQuery templates. So the history of JsRender revolves around JQuery Templates. Aim of the approach is to achieve fast,robust and optimized applications.Idea behind JQuery templates is to convert the JSON objects to HTML and 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 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 which are used to insert data. Now, call the render method.

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

What is this Json Data(jsondata) looks 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 the actual data. This article is just a hint of JsRender and its capabilities.Please refer 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.
CodeProject