JsRender Fundamentals
Learn how to build fast, robust, and maintainable Web applications with JavaScript, jQuery and JsRender: the successor to jQuery Templates.
What you'll learn
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.
Table of contents
- Introduction 1m
- What is JsRender 4m
- JsRender Performance Benchmarks 3m
- JsFiddle 2m
- JsFiddle and JsRender Hello World: Demo 8m
- Bootstrap Styling: Demo 4m
- Why Use JsRender? 2m
- With and Without JsRender Templates: Demo 6m
- Getting Started in Visual Studio 3m
- Getting Started in Visual Studio: Demo 2m
- 3 Steps to JsRender 1m
- 3 Steps to JsRender: Demo 6m
- Course Conventions: Demo 5m
- Resources and Summary 1m
- Overview 1m
- Nested Templates and #index 2m
- Demo: Nested Templates and #index 4m
- Loop Through Multiple Objects 1m
- Demo: Loop Through Multiple Objects 4m
- Changing Context with the {{for}} Token 1m
- Demo: Changing Context with the {{for}} Token 4m
- Travelling Up and Down Object Graphs 3m
- Demo: Travelling Up and Down Object Graphs 4m
- Demo: Context and #index 8m
- Recap 1m
- Overview 2m
- Compiling and Toggling Templates 1m
- Demo: Compiling and Toggling Templates 6m
- Registering compiled named templates 3m
- Demo: Registering compiled named templates 3m
- Compiling and Registering Multiple Templates 1m
- Demo: Compiling and Registering Multiple Templates 3m
- Getting, Compiling, and Rendering External Templates 3m
- Demo: Getting, Compiling, and Rendering External Templates 7m
- Demo: Reusing Multiple External Templates 4m
- Recap 2m
- Overview 1m
- Custom Tags 3m
- Creating a Star Rating Custom Tag 6m
- Converters 2m
- Converters In Action 4m
- Helper Function in a Template Context 2m
- Helper Function in a Template Context: Demo 5m
- Using Helper Functions with Custom Tags 6m
- Allowing JavaScript 4m
- Allowing JavaScript: Demo 1m
- Reusable Helper Functions 1m
- Reusable Helper Functions: Demo 2m
- Deciding Between Tags, Converters, and Helper Functions 2m
About the author
John Papa is a Principal Developer Advocate with Microsoft and an alumni of the Google Developer Expert, Microsoft Regional Director, and MVP programs. He's passionate about Web and mobile technologies, and often enjoys speaking around the world at keynotes and sessions for conferences, including NgConf, Build, Ignite, VSLive, and AngleBrackets. John is a co-host of the popular Adventures in Angular podcast, author of the Angular Style Guide, several books, and many popular Pluralsight courses. ... more