caseycorcoran and maverix (Andrew Harry) have created a gist for an external template engine using jQuery for Knockout’s new native templating feature in 1.3. I am using Knockout in one of my Phonegap projects but I am trying to avoid jQuery in favor of xui.js which is a much smaller library optimized for mobile phone HTML5 development. I have created a fork of their gist changing the ajax loading from jQuery to the xhr function in xui.js
//retrieve our actual template via AJAX
getTemplate: function() {
if (!this.loading && !this.loaded) {
this.loading = true;
var manager = this;
x$('body').xhr(this.getUrl(), {callback:funciton(){
manager.loaded=true;
manager.loading = false;
manager.currentTmpl(this.responseText);
},error: function(){
manager.loaded = true;
manager.loading = false;
manager.currentTmpl(ExternalTemplateSource.errorTemplate);
}});
}
}
The magic is done using x$(‘body’).xhr which loads the content through xui.js XmlHttpRequest implementation, xui requires a dom element but since there is no way to know about which specific elements area available I have loaded it through the document body. Potentially this could be changed to directly load the template into an element used as the template source.
Go to the gist External Native Templates for Knockout 1.3 using xui.js
