jQuery Template Fundamentals

Learn how to perform client-side data templating with jQuery Templates.
Course info
Rating
(155)
Level
Intermediate
Updated
Feb 28, 2012
Duration
1h 1m
Table of contents
Description
Course info
Rating
(155)
Level
Intermediate
Updated
Feb 28, 2012
Duration
1h 1m
Description

The jQuery Template plug-in is a small JavaScript library that enables client-side data templating. While the plug-in is not currently under development by the jQuery team, it is a feature rich tool being used by many large websites today.

About the author
About the author

Matt is an independent consultant with expertise in web application design and development and systems integration. As a writer, Matt has contributed to several journals and magazines such as MSDN Magazine. Matt regularly shares his love of technology by speaking at local, regional, and international conferences such as DevWeek, Prairie Dev Con, That Conference, and VS Live. As a Pluralsight Author, Matt has created more than 30 courses on the topics of web, mobile, and cloud development.

More from the author
HTML Fundamentals
Beginner
2h 20m
Jun 21, 2019
More courses by Matt Milner
Section Introduction Transcripts
Section Introduction Transcripts

jQuery Template Basics
Hello, and welcome to the first module in the course on jQuery templates. We're going to focus on some of the basics of applying templates. My name is Matt Milner and I'm going to be showing you how to leverage this great client-side technology. Now you might be asking, why would I want to use these client-side templates? Well, the main reason might be that you're tired of writing code that looks like this. We have on the server, for years now, had data binding in web forms and ASP. NET. We've had the ability in Razor views and ASP. NET MVC to go out and mix our markup and our code and stop concatenating strings together. What we really want to get to on the client is the ability to write something like this. Where we have a template or we have some markup and we want to go out and apply that template to some data or we want to render it with some data applied. And then we want to put it into the DOM or we want to put it into the document as we see it. Now here's an example at the top where I was really just trying to fit it on the screen, a very basic table row with three cells. And you can imagine how ugly that gets when you start trying to build a rich set of HTML that's going to render out nicely on the client and putting data in there with it. So, the ability to separate the data from the markup is key here when we start talking about client-side templates. And that's really what we're going to look at, is how we can leverage that with jQuery templates plugin today.

Nesting with jQuery Templates
Hello, and welcome to the second module in the jQuery templates course. In this module, we're going to be taking a look at nesting of templates, context awareness -- or getting a hold of the current item being rendered, whether that's the data or the template itself. And we'll look at HTML encoding some of our content, so if our data actually has HTML markup that we want to render into the page. My name is Matt Milner, and I'm going to show you how all this works.

Scripting jQuery Templates
Welcome to this third module in the jQuery Templates Course. My name is Matt Milner and I'm going to walk you through working with these templates that we're using to render our data. Now that's going to include things such as template caching, so we can cache the compiled templates, we're going to take a look at template options, for being able to pass a JavaScript map into the template, and we're also going to look at working with the templates once they've been rendered to be able to do things like in script find the original data that was used to render, find the actual template, change the templates for a given node, or reapply a particular template with new data.