Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Do you know JsRender?

, 13 Jun 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
May be one of you can provide more insights, after all, it’s mutual learning that helps a community.

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 which 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) 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 actual data. This article is just a hint of JsRender and its capabilities. Please refer to the following warning before its usage:

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Himanshu DS
Web Developer CodeSpread.com
India India
I am a regular developer working on c#,asp.net,sql,cms,digital marketing related sites. Through my blog, I am showing the non-technical part of our daily technical terms and processes which can be used to describe it to a layman.Sometimes I write basic technical posts also.
Follow on   Twitter

Comments and Discussions

 
QuestionLack of trust in the future... PinprofessionalAlexCode16-Jun-13 20:40 
AnswerRe: Lack of trust in the future... PinmemberHimanshu DS16-Jun-13 22:29 
GeneralRe: Lack of trust in the future... PinprofessionalAlexCode16-Jun-13 22:43 
GeneralRe: Lack of trust in the future... PinmemberHimanshu DS17-Jun-13 21:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141022.2 | Last Updated 13 Jun 2013
Article Copyright 2013 by Himanshu DS
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid