This is a quick walkthrough of JsRender. JsRender is the next-generation jQuery Templates, optimized for fast, string-based rendering. We will be using jQuery in our examples below, but JsRender is not dependent on jQuery.
We start with the HTML below. Please download JsRender and make it available on your local environment. In our example, jsrender.js is in the root folder.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jsrender.js" type="text/javascript"></script>
<script type="text/javascript">
var movies = [
{ name: "Up", releaseYear: "2009", languages: [{ name: "English" }, { name: "Spanish" }] },
{ name: "Finding Nemo", releaseYear: "2003", languages: [] },
{ name: "Toy Story", releaseYear: "1995", languages: [{ name: "English" }, { name: "German" }] }
];
</script>
</head>
<body>
<ul id="movieList" />
</body>
</html>
Everything is standard HTML, JavaScript and JSON so far. Now let’s start using JsRender. After the movieList, let’s insert the the template.
<script id="movieTemplate" type="text/x-jsrender">
<li>
{{>name}} {{>releaseYear}}
</li>
</script>
Notice we insert data by using the syntax {{>variable}}.
After that, insert the call to JsRender template render.
<script type="text/javascript">
$("#movieList").html(
$("#movieTemplate").render(movies)
);
</script>
What our code does is it calls JsRender to go through the array of movies and create the HTML for each movie using the template provided. Running the HTML in the browser outputs.
- Up 2009
- Finding Nemo 2003
- Toy Story 1995
The complete code looks like
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jsrender.js" type="text/javascript"></script>
<script type="text/javascript">
var movies = [
{ name: "Up", releaseYear: "2009", languages: [{ name: "English" }, { name: "Spanish" }] },
{ name: "Finding Nemo", releaseYear: "2003", languages: [] },
{ name: "Toy Story", releaseYear: "1995", languages: [{ name: "English" }, { name: "German" }] }
];
</script>
</head>
<body>
<ul id="movieList" />
<script id="movieTemplate" type="text/x-jsrender">
<li>
{{>name}} {{>releaseYear}}
</li>
</script>
<script type="text/javascript">
$("#movieList").html(
$("#movieTemplate").render(movies)
);
</script>
</body>
</html>
Now let’s go over some basic JsRender syntax.
1. If you want to print values without HTML encoding, use {{:value}}.
{{:name}} {{>releaseYear}}
2. If you want a default value, use ||.
{{>name}} {{>releaseYear || 'N/A'}}
3. If you want to display the current index during a loop, use #index.
{{:#index+1}} {{>name}} {{>releaseYear}}
4. If you want conditions, use {{if}} and {{else}}.
{{if releaseYear == '1995'}}
{{>name}} {{>releaseYear}} (Classic)
{{else releaseYear == '2009'}}
{{>name}} {{>releaseYear}} (New)
{{else}}
{{>name}} {{>releaseYear}}
{{/if}}
5. If you want loops, use {{for}}
{{>name}} {{>releaseYear}}
{{for languages}}
{{>name}}
{{/for}}
6. If you want to access the parent, use {{>#parent.parent.data}}
{{>name}} {{>releaseYear}}
{{for languages}}
{{>#parent.parent.data.name}} {{>name}}
{{/for}}
7. You can also access use context variables to access the parent.
{{>name}} {{>releaseYear}}
{{for languages ~movieName=name}}
{{>~movieName}} {{>name}}
{{/for}}
8. If you want to use templates inside a template, use the tmpl attribute.
<script id="languageTemplate" type="text/x-jsrender">
{{>name}}
</script>
....
{{>name}} {{>releaseYear}}
{{for languages tmpl="#languageTemplate" /}}
9. You can create helper functions.
<script type="text/javascript">
$.views.helpers({
toUpper: function(val) {
return val.toUpperCase();
}
});
</script>
...
{{>~toUpper(name)}} {{>releaseYear}}
10. You can create custom tags.
<script type="text/javascript">
$.views.tags({
toUpper: function(val) {
return val.toUpperCase();
}
});
</script>
...
{{toUpper name /}} {{>releaseYear}}
11. If you want to access the data passed to the render function, use #data.
{{for #data}}
<li>
{{>name}} {{>releaseYear}}
</li>
{{/for}}
12. You can also pass parameters and functions to the render function.
{{>~label}} {{>name}} {{>releaseYear}}
...
$("#movieTemplate").render(movies, { label: "Movie: " })
13. If you wish to loop through an array inside the template instead of JsRender, wrap your data in an array.
$("#movieTemplate").render([movies]);
That wraps up our quick overview of JsRender. For advanced features and more examples, please look at the official JsRender demos.
I would say this is a VERY quick review of jsRender. I hope you know enough about jsRender and publish a REAL tutorial and not this short ‘pragmatic’ story – it just clutters the Google’s search results.
All the best!
Thank you very much, David! This may be quick and short guide, but it gives nice start point, from which I can start learning the tech deeper!
Great cheat cheet.. Thanks for sharing!
how to call send multiple parameter in template i using helper function as isDate:val
and i want to send two parameters something like this isDate:val,:name how can i send multiple parameters to helper function please help
Thx. Solved my problem instantly.
how to break for loop in js render?