Using JsRender to render HTML template

I just happened to use jsrender on my recent project and I have to say that it really helps to simplify my code. jsrender is a javascript templating engine which is used for string based rendering.

For example, let’s say I want to show new employees as below:

So the first thing to do is to get the list of employees as JSON, then I can use JavaScript to manipulate DOM. I could write the following Javascript (which is a bit complicated):

First, the sample data


var employees = [
                                {
                                    Name: "Joe Blogg",
                                    Role: "Software Developer",
                                    Email: "jblogg@email.com"
                                },
                                {
                                    Name: "Jill Blogg",
                                    Role: "Marketing Officer"                                    
                                },
                                {
                                    Name: "Jack Blogg",
                                    Role: "Project Manager",
                                    Email: "jblogg@email.com"
                                },
                                {
                                    Name: "Jon Blogg",
                                    Role: "Software Developer",
                                    Email: "jblogg@email.com"
                                },
                                {
                                    Name: "James Blogg",
                                    Role: "Software Developer"                                    
                                }
            ];

The JavaScript:

var content;
$(employees).each(function (val) {
  content = "<li><ul><li class='innerList'>" + val.Name + "</li>"
              + "<li class='innerList'>" + val.Role + "</li>"
              + "<li class='innerList'>" + val.Email + "</li>"
              + "</ul></li>"
});

$("#dvContainer ul").append(content);

The JavaScript above can get harder to read as the content grows. So let’s look at the jsrender version:

<script id="ViewTemplate" type="text/x-jsrender">    
            
            <li class="outerList">                 
                <ul>
                    <li class="innerList">{{>Name}}</li>
                    <li class="innerList">{{>Role}}</li>
                    <li class="innerList">{{if Email}} {{>Email}} {{else}} ??? {{/if}}</li>
                </ul>                               
            </li>             
    </script>

<script type='text/javascript'>
$("#dvContainer ul").append($("#ViewTemplate").render(employees));
</script>

The jsrender version above uses template which is wrapped in a script tag (there is another way to define the template which can be found on the jsrender site above). The template defines how the data should be displayed. Once we have done the template, we can use the render() function to generate a string that is ready to be inserted to DOM. The {{>}} is jsrender syntax to encode the value.

Please note that you can use jsrender without jquery.

The code for this post can be found in here

Advertisements