Click here to Skip to main content
13,259,976 members (43,732 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked
Posted 11 Feb 2013

Do You Know JsRender?

, 13 Jun 2013
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

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 


                  alt="{{>ThumbnailImageAlt}}" /></a></div>
          <div class="prodcategrating">
                <div class="rating theme2Rating categRating">
                        <span class="star{{>ReviewRating}}">&nbsp;</span>

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

function renderProdsTmpl(jsondata){
$( ".categprodsWrappr" ).html(

What does JSON data (jsondata) look like?


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


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


About the Author

Himanshu DS
Web Developer
India India
I am a regular developer working on c#,,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.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
bhalaniabhishek19-Jul-15 23:43
memberbhalaniabhishek19-Jul-15 23:43 
QuestionLack of trust in the future... Pin
AlexCode16-Jun-13 21:40
professionalAlexCode16-Jun-13 21:40 
AnswerRe: Lack of trust in the future... Pin
Himanshu DS16-Jun-13 23:29
memberHimanshu DS16-Jun-13 23:29 
GeneralRe: Lack of trust in the future... Pin
AlexCode16-Jun-13 23:43
professionalAlexCode16-Jun-13 23:43 
GeneralRe: Lack of trust in the future... Pin
Himanshu DS17-Jun-13 22:33
memberHimanshu DS17-Jun-13 22:33 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171114.1 | Last Updated 13 Jun 2013
Article Copyright 2013 by Himanshu DS
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid