Using Underscore Template with Knockout using interpolate due to asp.net

Using Underscore Template with Knockout using interpolate due to asp.net

Issue
I need to use the underscore template instead of the default KnockoutJS
template engine due to performance. However, since I'm in an asp.net
environment the default tags of <% and %> will not work because of the
asp.net handler.
What I need is to apply something like the following:
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
Making it use the {{ and }} tags
Note 7: Using the Underscore.js template engine
The Underscore.js template engine by default uses ERB-style delimiters
(<%= ... %>). Here's how the preceding example's template might look with
Underscore:
<script type="text/html" id="peopleList">
<% _.each(people(), function(person) { %>
<li>
<b><%= person.name %></b> is <%= person.age %> years old
</li>
<% }) %>
</script>
Here's a simple implementation of integrating Underscore templates with
Knockout. The integration code is just 16 lines long, but it's enough to
support Knockout data-bind attributes (and hence nested templates) and
Knockout binding context variables ($parent, $root, etc.).
If you're not a fan of the <%= ... %> delimiters, you can configure the
Underscore template engine to use any other delimiter characters of your
choice.
Taken from knockoutjs.com
From the above the bold documentation
It states i can change the delimiter but doesn't specify any specifics on
how to do it...
Current Attempt
ko.underscoreTemplateEngine = function() {
};
ko.underscoreTemplateEngine.prototype = ko.utils.extend(new
ko.templateEngine(), {
renderTemplateSource: function (templateSource, bindingContext,
options) {
// Precompile and cache the templates for efficiency
var precompiled = templateSource['data']('precompiled');
if (!precompiled) {
precompiled = _.template("<% with($data) { %> " +
templateSource.text() + " <% } %>");
templateSource['data']('precompiled', precompiled);
}
// Run the template and parse its output into an array of DOM
elements
var renderedMarkup = precompiled(bindingContext).replace(/\s+/g, "
");
return ko.utils.parseHtmlFragment(renderedMarkup);
},
createJavaScriptEvaluatorBlock: function(script) {
return "<%= " + script + " %>";
}
});
ko.setTemplateEngine(new ko.underscoreTemplateEngine());