JsRender Fundamentals

Learn how to build fast, robust, and maintainable Web applications with JavaScript, jQuery and JsRender: the successor to jQuery Templates.
Course info
Rating
(110)
Level
Beginner
Updated
Apr 30, 2012
Duration
2h 59m
Table of contents
JsRender Fundamentals: Course Overview
Getting Started with JsRender
JsRender Core Tokens
View Paths, Nesting, and Context Changes
Managing Templates
Advanced JsRender Concepts and Tips
Description
Course info
Rating
(110)
Level
Beginner
Updated
Apr 30, 2012
Duration
2h 59m
Description

Super fast rendering, code-less tag syntax, and no DOM nor jQuery dependency. That’s JsRender. JsRender (the successor to jQuery Templates) is a JavaScript library that allows you to define a boilerplate structure once and reuse it to generate content dynamically. Learn how JsRender brings a new templating library to HTML5 development that has a code-less tag syntax, high performance, no dependency on jQuery nor a DOM, supports creating custom functions, and uses pure string based rendering.

About the author
About the author

John Papa is a Principal Developer Advocate with Microsoft and an alumnus of the Google Developer Expert, Microsoft Regional Director, and MVP programs.

More from the author
Play by Play: Extending the Browser
Beginner
38m
30 Apr 2018
More courses by John Papa
Section Introduction Transcripts
Section Introduction Transcripts

JsRender Fundamentals: Course Overview
John Papa: Welcome to JsRender Fundamentals, building templates with HTML and Java Script. My name's John Papa and in this Pluralsight course, I'm going to walk you through what you need to know to build web apps using the JsRender Library, along with HTML, Java Script jQuery. And along the way, we're going to discover what JsRender is and where it's a good fit, how to get started with JsRender's fast templating engine. We'll cover some valuable resources and tools, demonstrate the core tokens, syntax and features and explain different ways to render the templates. And for when your project needs a scale, I'll demonstrate tips such as how to manage the templates, along with events, techniques and creating custom tags, helpers and converters and throughout the course, I'll point out tips on how to get the most of JsRender. So with that, let's dive right in.

Getting Started with JsRender
In the first module, we're going to start by explaining what JsRender is in relation to jQuery and jQuery Templates and how it can be used with jQuery or without. And we'll talk about the roadmap for JsRender and look at some of these performance benchmarks and just take a look at how speedy it really is. And now, we'll take a step back and look at a very simple yet effective tool for writing and testing JavaScript called JsFiddle. So we can write some quick JsRender code and see how it works. Next, we'll explore why you might want to use JsRender and what problems it might be solving for you. And then getting into using Visual Studio to code JsRender, so how we reference JsRender, where do we get it from? Some various ways we can do that. We'll talk about GitHub, some of the new get extensions and the other tool that we can use in Visual Studio. And then "On Your Mark, Get Set, Go" is all about how do we get JsRender up and running and we'll write our first real JsRender application where we can see the three easy steps to get moving. And then we'll wrap up the first module. We'll take and look at some of the key resources that can help you out along the way. So with that, let's start right in.

JsRender Core Tokens
When coding with JsRender templates, it's essential to understand what the core tokens are, so in this module, we're going to talk about those core tokens and also get into how you can use jquery and JsRender together, or not use jquery at all, just use JsRrender on its own because there is no dependency on jquery or the dom (phonetic). So we'll start of there, and then we'll move into the different tokens in text that you have. How you can do HTML encoding, or do no encoding? How can you get into dealing with arrays? How can you look up elements by key? So we're going to talk about those, and those are basically the data paths that JsRender can access through its templating syntax. And then we'll also talk about the for loops that you can do so you can loop through items, what the # data is, the hash data, and then also conditionals and expressions that you can create for truth E and false E expressions using the if and else tokens. With that, let's dive right in.

View Paths, Nesting, and Context Changes
Most applications have to do with object hierarchies. So managing things like customers who might have orders, that might have order details, and each of those might have a product is really important. And JsRender helps us manage these object hierarchies using things like View Paths, Nested Templates, and Context Changes. So in this module, we'll talk about how JsRender uses Nested Templates where we can link one template to another. We can use the for loop to be able to nest loops or we can loop through multiple items inside the same for loop. And then also, how do we change context using JsRender? So maybe we have dive deep into a hierarchy when it use a lot of dot-notations syntax craziness. So we can use the {{for}} to actually help avoid that. And then of course, we'd-- sometimes we need dive down into hierarchies in dot notation and other times we want to go back up. So the way we can actually pass the context in from the outside of the for loop or the template and then use it inside using context. So let's get started.

Advanced JsRender Concepts and Tips
One of the best parts about JsRender is not just that it can do templating, but it also has a lot of other things that you can do too. So, in this module we're going to talk about what some of those things are beyond templating and talk about how we can use them in creating applications. First, we'll talk about how you can create your own Custom Tags. Sometimes in JsRender you can just use the simple tags, like the "for" or the "if" to do what you need to do, but maybe you want to create your own Custom Tag. And for example you might want to create a star rating control. So, we're going to show how you can do something like that. Also Converters, how do you convert a value from one type of data to another type of data to represent it on the screen? In the XAML world we use Converters to convert values like a color on the screen to a number in the database or vice versa. So, we'll show you how you can use Converters with JsRender too. Helper Functions in a Template Context allow you to create your own functions to do some kind of logical processing over in JavaScript that gets rendered out using JsRender. So, we're still able to separate out our code from our structure, but we allow us to create these functions in JavaScript and then use them inside of JsRender. This is great for doing more complicated things that we have to do with templating. You can also write code inside of your JsRender templating too although, there's only certain circumstances I would recommend doing this and we'll talk about that as well. And then finally, we'll wrap up with how you create Helper Functions that apply all across the board to all your JsRender context. So with that, let's dive right in.