Do you know JsRender?

jsrender
jsrender

Do you know JsRender?

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.

Author: hershey

A passion for knowledge drives me to do programming, A passion for programming drives me to create something different, A passion for creation drives me to spread the knowledge.

Share This Post On

0 Comments

  1. nice superb explaination

    Post a Reply
  2. thanks for the tutorial
    I am having a problem.
    The feature “Create SQL server database” isn’t available , I can’t select it.
    Can you help, please ?

    Post a Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

More from CodeSpread:

  • YSlow is a nice addon to determine page performanceYSlow is a nice addon to determine page performanceYSLOW is one handier tool for a developer. It is used to analyze web pages and get it tested on the rules identified which are explained below. I like the name “YSlow”as it more or less poses a que...
  • UI: Jquery is Javascript LibraryUI: Jquery is Javascript LibraryJquery Basics: With the title itself, anybody can deduce that we are indirectly talking about javascript only. So, we can say that Javascipt is the guardian of Jquery. These are client end technol...
  • jQuery: Effects/MethodsjQuery: Effects/MethodsIn our last article, jQuery Part 1 , we covered the basic understanding and now we will move to Methods or effects available in jQuery. Hide/Show/Toggle Methods The most used method Hide/Show. Fr...
  • Maintain Page State on Browser’s Back Button ClickMaintain Page State on Browser’s Back Button ClickThis is a very common requirement and a major expectation for a quality user experience. Scenario: User visits a site which heavily uses AJAX. Here, AJAX will not let the user navigate from the p...
  • REST- REpresentational State TransferREST- REpresentational State TransferREST – REpresentational State Transfer, is an enhanced version of client server style architecture for distributed communication. When we talk about distributed communication, we think of reques...
  • My first introduction to Java AppletsMy first introduction to Java AppletsWhat is it? An applet is a class file that is written to display graphics in web browser. We embed applets using <APPLET> HTML tags. When run in a web page, java applets are downloaded autom...
  • C#: Useful JSON in .NetC#: Useful JSON in .NetWhy JSON? All web applications revolve around large chunk of data and availability of that data to our application is of utmost importance. To do that, we have options like fetch data from databas...
  • How To: Cross Page PostingHow To: Cross Page PostingWhat is a POST? Wikipedia says,The POST request method is designed to request that a web server accept the data enclosed in the request message's body for storage.It is often used when uploading a...