Best method to use external templates with knockout

[Kenneth]

I have built a html page with some internal templates. See url
jsfiddle:

http://jsfiddle.net/hoven002/jQTDH/

What is the best method to make the templates external and how?

Regards, Kenneth

[zee...@gmail.com]

Take a look at this updated jsfiddle: http://jsfiddle.net/hoven002/jQTDH/ 

I've added functions for loading templates into the page from external files. They won't work at the moment because the jsfiddle server doesn't have these template files on it. but with some minor modifications you should be able to get it to work.

The appendTemplateScript function is used to add a script tag to the page dynamically with the contents being that of some external file on the server. It will automatically skip adding the template if an element already exists on the page with that id so that you don't load the same template more than once.

The loadTemplates function simply calls appendTemplateScript for each of the templates that will be required for this page and reterns a jquery defferred object. This function is called prior to the $.ready() function so all templates will be loaded into the page before the ready event fires.

If you'd like to load templates after the ready event fires (after your ko.applybindings call) you will need to apply bindings again, and scope it to the element that you are attaching to that template.

Derek

[Kenneth]

Hello Derek,

I have looked at the updated jsFiddle but can't see any difference in
the code.
Can you check? Thanks for the help!

Kenneth

[garris]

Interesting topic, looks like the link is to the original, not the
updated script...

[zee...@gmail.com]

Sorry about that Kenneth. I'm not sure what happened there.

I've added my changes again, here's a link to the new jsFiddle. Let me know if you still have problems.

http://jsfiddle.net/jQTDH/4/ 


The main changes are the same as before, and here's a copy of the functions mentioned...

/* append script tags for knockout templates, getting the content from a remote url.
    id: an id to give the script element. This is used to determine if the template is already included in the page.
    url: url to the template html file.
*/
function appendTemplateScript(id, url) {
    var dfd = $.Deferred();
    if (document.getElementById(id)) {
        dfd.resolve();
    } else {
        $.ajax({
            url: url,
            dataType: 'html'
        }).done(function(data) {
            var script = $("<script>").attr("id", id).attr("type", 'text/html').html(data);
            $("body").append(script);
            dfd.resolve();
        });
    }
    return dfd.promise();
};

// calls appendTemplateScript for several template files and returns a deferred object that is 
// resolved when all files have loaded.
function loadTemplates() {
    var deferred = new $.Deferred();

    $.when(appendTemplateScript('currentTmpl', '/templates/currentTmpl.html'),
        appendTemplateScript('01_tmpl', '/templates/01_tmpl.html'),
        appendTemplateScript('02_tmpl', '/templates/02_tmpl.html'),
        appendTemplateScript('specialism_templ', '/templates/specialism_templ.html'),
        appendTemplateScript('disease_templ', '/templates/disease_templ.html'))         
    .done(function () {
        deferred.resolve();
        }
    );

    return deferred.promise();
}; 

After adding these functions you would just wrap your jquery ready function in a call to the load templates function like so

loadTemplates().done(function () {
    $().ready(function () { 

              // other document ready code omitted. 
        // Activate Knockout.js
        ko.applyBindings(new WizardViewModel());
    })
});​ 

Derek