Load knockout template from external file without complex engine?

Question

I've found engines, plugins and functions to load external templates, but I'm wondering if there's a simpler way to do it. Something like this?

templates.html

<script id="testTemplate" type="text/html">  <div>this is a div</div> </script> 

index.html

<div id="templateContainer"></div> <script>     $(document).ready(function() {          $("#templateContainer").load("templates.html");     } </script> 

Will this work? Are there any "gotchas"?

Answer 1

Here's what I use to load a template file that contains a collection of templates:

var loadTemplateCollection = function(file, success) {     $.get('templates/' + file + '.html', function(templates) {         $('body').append('<div style="display:none">' + templates + '<\/div>');         success();     }); }; 

Here's an example where I use this function:

self.loadPage = function () {     if (!self.isLoaded()) {         loadTemplateCollection('uploadwizard', function() {             self.isLoaded(true);             self.uploadWizard();         });     } } 

Your view would look something like this (the if is important):

<div data-bind="template: {'if': isLoaded, name: 'uploadwizard', data: wizard}"></div> 

Answer 2

This is what I am using to load the new page view. I think it is pretty simple to use :

var template = 'template.html'; var targetID = 'container'; var partialVM = {data : 1};  var load = function (template, targetID, partialVM) {     $.ajax(template, { async: false })         .success(function (stream) {             $('#' + targetID).html(stream);             ko.applyBindings(partialVM, document.getElementById(targetID));         }     ); }; 

But in my html templates I didn't have the script element, just a simple div as root element.

I hope it helps.