knockout.js - Using Underscore Template with Knockout using interpolate due to asp.net -
issue
i need use underscore template instead of default knockoutjs template engine due performance. however, since i'm in asp.net environment default tags of <% , %> not work because of asp.net handler.
what need apply following:
_.templatesettings = { interpolate : /\{\{(.+?)\}\}/g }; making use {{ , }} tags
note 7: using underscore.js template engine
the underscore.js template engine default uses erb-style delimiters (<%= ... %>). here’s how preceding example’s template might underscore:
<script type="text/html" id="peoplelist"> <% _.each(people(), function(person) { %> <li> <b><%= person.name %></b> <%= person.age %> years old </li> <% }) %> </script> here’s simple implementation of integrating underscore templates knockout. integration code 16 lines long, it’s enough support knockout data-bind attributes (and hence nested templates) , knockout binding context variables ($parent, $root, etc.).
if you’re not fan of <%= ... %> delimiters, can configure underscore template engine use other delimiter characters of choice.
taken knockoutjs.com
from above bold documentation
it states can change delimiter doesn't specify specifics on how it...
current attempt
ko.underscoretemplateengine = function() { }; ko.underscoretemplateengine.prototype = ko.utils.extend(new ko.templateengine(), { rendertemplatesource: function (templatesource, bindingcontext, options) { // precompile , cache templates efficiency var precompiled = templatesource['data']('precompiled'); if (!precompiled) { precompiled = _.template("<% with($data) { %> " + templatesource.text() + " <% } %>"); templatesource['data']('precompiled', precompiled); } // run template , parse output 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()); update: no longer using above include jquery, underscore, , knockout. in script have
_.templatesettings = { interpolate: /\{\{([\s\s]+?)\}\}/g }; however, nothing being parsed.
template declaration is
<script type="text/html" id="common-table-template">
working demo jsfiddle
html
<h1>people</h1> <ul data-bind="template: { name: 'peoplelist' }"></ul> <script type="text/html" id="peoplelist"> {{ _.each(people(), function(person) { }} <li> <b data-bind="text: person.name"></b> {{= person.age }} years old </li> {{ }) }} </script> <p>this shows can use both underscore-style evaluation (<%= ... %>) <em>and</em> data-bind attributes in same templates.</p> js
/* ---- begin integration of underscore template engine knockout. go in separate file of course. ---- */ ko.underscoretemplateengine = function () { } ko.underscoretemplateengine.prototype = ko.utils.extend(new ko.templateengine(), { rendertemplatesource: function (templatesource, bindingcontext, options) { // precompile , cache templates efficiency var precompiled = templatesource['data']('precompiled'); if (!precompiled) { _.templatesettings = { interpolate: /\{\{=(.+?)\}\}/g, escape: /\{\{-(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g }; precompiled = _.template("{{ with($data) { }} " + templatesource.text() + " {{ } }}"); templatesource['data']('precompiled', precompiled); } // run template , parse output 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()); /* ---- end integration of underscore template engine knockout ---- */ var viewmodel = { people: ko.observablearray([ { name: 'rod', age: 123 }, { name: 'jane', age: 125 }, ]) }; ko.applybindings(viewmodel); 
Comments
Post a Comment