Using an external Template in KnockoutJS

templates knockout.js external knockout-templating
KebdnK picture KebdnK · Feb 28, 2012 · Viewed 16.3k times · Source

is it possible to use an external Template in KnockoutJS like this?

<script type="text/html" id="a_template" src="templates/a_template.html">
</script>

I've tried this solution but didn't get it working.

Answer

soniiic picture soniiic · Feb 28, 2012

You can use jquery to dynamically load html into a script element, and then execute knockout based on that.

<script type="text/html" id="template_holder"></script>
<script type="text/javascript">
$('#template_holder').load('templates/a_template.html', function() {
  alert('Load was performed.');
  //knockout binding goes here
});</script>

Your knockout binding must be done in the callback function though, otherwise there's a chance that you'll be trying to bind before the page has loaded

UPDATE Here's an example I've coded on jsfiddle to demonstrate dynamic loading: http://jsfiddle.net/soniiic/2HxPp/

Related questions

KnockoutJS bind event after template render

I've been searching for a while, and I'm pretty confident this is a new question, and not a repeat like the title suggests. :) Basically, I'm trying to find out if there is a subscribe-able event that KnockoutJS creates after a …

Read More
Knockout renderTemplate() rendering modes

I'm trying to call ko.renderTemplate() in a custom binding. However I can't find any documentation for it's usage, particularly the rendering mode parameter. Knockout.js pro tips – working with templates The site above has a section "You can render …

Read More
How can I echo HTML in PHP?

I want to conditionally output HTML to generate a page, so what's the easiest way to echo multiline snippets of HTML in PHP 4+? Would I need to use a template framework like Smarty? echo '<html>', "\n"; // …

Read More