Managing templates with koExternalTemplateEngine

We have seen two ways of loading templates, both of them are good enough to manage a low number of templates, but when lines of code begin to grow, we need something that allows us to forget about template management. We just want to call a template and get the content.

For this purpose, Jim Cowart's library, koExternalTemplateEngine, is perfect. This project was abandoned by the author in 2014, but it is still a good library that we can use when we develop simple projects. In the next chapters, you will learn more about asynchronous loading and module patterns and we will see other libraries that are currently maintained.

We just need to download the library in the js/vendors folder and then link it in our index.html file just below the Knockout library.

<script type="text/javascript" src="js/vendors/knockout.debug.js"></script>
<script type="text/javascript" src="js/vendors/koExternalTemplateEngine_all.min.js"></script>

Now you should configure it in the viewmodel.js file. Remove the templates array and the foreach statement, and add these three lines of code:

infuser.defaults.templateSuffix = ".html";
infuser.defaults.templateUrl = "views";
ko.applyBindings(vm);

Here, infuser is a global variable that we use to configure the template engine. We should indicate which suffix will have our templates and in which folder they will be.

We don't need the <script type="text/html" id="template-id"></script> tags any more, so we should remove them from each file.

So now everything should be working, and the code we needed to succeed was not much.

KnockoutJS has its own template engine, but you can see that adding new ones is not difficult. If you have experience with other template engines such as jQuery Templates, Underscore, or Handlebars, just load them in your index.html file and use them, there is no problem with that. This is why Knockout is beautiful, you can use any tool you like with it.

You have learned a lot of things in this chapter, haven't you?