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.
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:
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
2. Split out the Template
But let’s now put the template into its own file, ProductTemplate.html in same folder (for now).
That’s all you need in the file.
3. Add koExternalTemplateEngine
Your new file will look like this:
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.
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
- You can specify a template file prefix (like “template_”) by setting the
- 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
- You can override the default loading template html by providing your own custom html string to the
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.
Knockout.js-External-Template-Engine on GitHub