KnockoutJS Essentials

Managing templates with jQuery

Since we want to load templates from different files, let's move all our templates to a folder called views and make one file per template. Each file will have the same name the template has as an ID. So if the template has the ID, cart-item, the file should be called cart-item.html and will contain the full cart-item template:

<script type="text/html" id="cart-item"></script>

The views folder with all templates

Now in the viewmodel.js file, remove the last line (ko.applyBindings(vm)) and add this code:

var templates = [ 'header', 'catalog', 'cart', 'cart-item', 'cart-widget', 'order', 'add-to-catalog-modal', 'finish-order-modal' ...