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>
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' ]; var busy = templates.length; templates.forEach(function(tpl){ "use strict"; $.get('views/'+ tpl + '.html').then(function(data){ $('body').append(data)...