Object JavaScript – Loading File Templates for Knockout Asynchronously Using koExternalTemplateEngine, Infuser

In the previous post, Using Infuser to Asynchronously Load Your Templates, we took a detour into Infuser and how it can be used to call template code. But what about calling Knockout templates?

You will probably want to put a template into a separate file so you can reuse it across various pages on your site.

koExternalTemplateEngine is a JavaScript library built on top of Infuser for you to load templates asynchronously from a remote resource. It currently supports both native and jquery templates.

And you’ll see how you can use Infuser to configure your Knockout Template Engine.

Getting Started with koExternalTemplateEngine

You can get KoExternalTemplate engine from GitHub or from NuGet. The default build includes both the koExternalTemplateEngine.js & koExternalTemplateEngine.min.js files.

Both locations provide the dependencies: TrafficCop and infuser. Using either of the koExternalTemplateEngine files will require you to include as separate script includes in your page.

In your HTML file, reference jQuery, jquery-tmpl (if you’re using jquery templates), knockout.js, TrafficCop, infuser and the koExternalTemplateEngine.js file.

So, after adding koExternalTemplateEngine using NuGet, my scripts look like this:

https://gist.github.com/devdays/8c8cb90fa7d39c36b3ab

Note: The “amd” build creates an Asynchronous Module Definition (AMD) amd-style module of just the koExternalTemplateEngine.js file – creating koExternalTemplateEngine-amd.js & koExternalTemplateEngine-amd.min.js.

Knockout With the Template In Your HTML File

Let’s start with a simple Knockout example. This sample starts with a ViewModel that binds data to a template that is placed inside a script tag. The sample does not use Infuser.

1. Starting with Templates in the HTML file

	<!DOCTYPE html>
	<html>
	<head>
	<title>Binding List to Template</title>
	</head>
	<body>
	<h2>Products</h2>

	<table data-bind="template: { name: 'producttemplate', foreach: productArray }">
	</table>

	<script type="text/html" id="producttemplate">
	<tr>
	<td data-bind="text: product"></td>
	<td data-bind="text: type"></td>
	</tr>
	</script>

	<script src="Scripts/knockout-2.2.1.debug.js"></script>
	<script type="text/javascript">
	function ViewModel() {
	this.productArray = ko.observableArray([
	{ product: "Widget", type: "Tool" },
	{ product: "Bolt", type: "Fastener" },
	{ product: "Washer", type: "Fastener" },
	{ product: "Screwdriver", type: "Tool" }
	]);
	}

	ko.applyBindings(new ViewModel());
	</script>
	</body>
	</html>

view raw

ojs-InlineKnockoutTemplate.html

hosted with ❤ by GitHub

2. Split out the Template

But let’s now put the template into its own file, ProductTemplate.html in same folder (for now).

	<tr>
	<td data-bind="text: product"></td>
	<td data-bind="text: type"></td>
	</tr>

view raw

ojs.product-template.html

hosted with ❤ by GitHub

That’s all you need in the file.

3. Add koExternalTemplateEngine

Then you can remove the template entirely and add the koExternalTemplateEngine JavaScript files and its dependencies.

Your new file will look like this:

	<!DOCTYPE html>
	<html>
	<head>
	<title>Binding List to Template</title>
	</head>
	<body>
	<h2>Products</h2>
	<table id="target"
	data-bind="template: { name: 'ProductTemplate', foreach: productArray }">
	</table>

	<script src="Scripts/jquery-2.0.0.js"></script>
	<script src="Scripts/knockout-2.2.1.debug.js"></script>
	<script src="Scripts/TrafficCop.js"></script>
	<script src="Scripts/infuser.js"></script>
	<script src="Scripts/koExternalTemplateEngine.js"></script>

	<script type="text/javascript">

	$(function () {
	//infuser.defaults.templateUrl = "./templates";

	function ViewModel() {
	this.productArray = ko.observableArray([
	{ product: "Widget", type: "Tool" },
	{ product: "Bolt", type: "Fastener" },
	{ product: "Washer", type: "Fastener" },
	{ product: "Screwdriver", type: "Tool" }
	]);
	}

	ko.applyBindings(new ViewModel());
	});
	</script>
	</body>
	</html>

view raw

ojs-HtmlFileUsingExternalTemplate.html

hosted with ❤ by GitHub

When the code runs, koExternalTemplateEngine will match up the producttemplate template name with the file you created named ProductTemplate.html and use that file for your template.

Configuring koExternalTemplateEngine

Since koKxternalTemplateEngine runs on top of Infuser, you can use Infuser to customize how koExternalTemplateEngine is configured..

You can configure koExternalTemplateEngine by overriding the infuser defaults:

by default, if your external template files have “.html” as the file extension and live in the same directory as the requesting HTML file, then you can simply reference them by name (for example, “CustomerTemplate” will call down a CustomerTemplate.html file).
You can specify a template file suffix (like “.tpl.html”) by setting the infuser.defaults.templateSuffix value
You can specify a template file prefix (like “template_”) by setting the infuser.defaults.templatePrefix value
You can specify a different URL/path to the template files if you prefer to keep them in a different directory than the requesting HTML file by setting the infuser.defaults.templateUrl value.
You can override the default loading template html by providing your own custom html string to the infuser.defaults.loadingTemplate.content property.

In the previous example, instead of placing the template in the same folder as your HTML file, you can put that template inside a templates folder. To do that, add the infuser configuration in your script. The configuration applies to all of your knockout templates.

	$(function () {
	infuser.defaults.templateUrl = "./templates";

	function ViewModel() {
	this.productArray = ko.observableArray([
	{ product: "Widget", type: "Tool" },
	{ product: "Bolt", type: "Fastener" },
	{ product: "Washer", type: "Fastener" },
	{ product: "Screwdriver", type: "Tool" }
	]);
	}

	ko.applyBindings(new ViewModel());
	});