Using JsRender with JavaScript and HTML


JsRender is a JavaScript library that allows you to define a boilerplate structure once and reuse it to generate HTML dynamically.

- April 20, 2015

Rest of the Story:

JsRender is a JavaScript library that allows you to define a boilerplate structure once and reuse it to generate HTML dynamically. JsRender brings a new templating library to HTML5 development that has a codeless tag syntax and high performance, has no dependency on jQuery nor on the Document Object Model (DOM), supports creating custom functions and uses pure string-based rendering.
The following sample will utilize a method within a MVC controller to output json string via jquery ajax call.

        public JsonResult GetCustomers()  
        {  
            var customers = new List(){  
                new Customer() { ID= "1", Name= "Bobby Jones", Birthday= "1902-03-17" },  
                new Customer() { ID= "2", Name= "Sam Snead",   Birthday= "1912-05-27" },  
                new Customer() { ID= "3", Name= "Tiger Woods", Birthday= "1975-12-30" }  
            };             
            return this.Json(customers, JsonRequestBehavior.AllowGet);  
            }  
        }  
  
    public class Customer{  
        public string ID {get; set;}  
        public string Name {get; set;}  
        public string Birthday {get; set;}  
    }  
    

You can render templates using JavaScript in several ways. First you’ll want to define your template either as a string or in a <script> tag. The <script> tag option is nice when you want to define your templates in the HTML, give them an id and reuse them. You can also create templates from strings, which gives you the ability to create them on the fly in code or even pull them from a data store..  The JavaScript on the page is as follows

  
  
The HTML looks like the following