Documentation

KnockoutJS jQuery-tmpl Template Compilation

This feature works the same as the jQuery-tmpl templates compilation. However, the templates are also rewritten to work with the KnockoutJS data-binding system.

To enable this feature, use the following configuration:

bundles.Add<HtmlTemplate>(
    "HtmlTemplates"
    // Assign the jQuery-tmpl processor to the HTML template bundles
    bundle => bundle.Processor = new KnockoutJQueryTmplPipeline()
);

Example compilation output

Given this template:

<li>
    <span class="color-box" data-bind="style: { backgroundColor: color }"></span>
    <span data-bind="text: color"></span>
    <a href="#" data-bind="click: deleteColor">Delete</a>
</li>

Cassette will generate this JavaScript:

$.template('ColorListItem', function(jQuery, $item) {var $=jQuery,call,__=[],$data=$item.data;with($data){__.push('<li>      ');__.push(((function() { return ko.templateRewriting.applyMemoizedBindingsToNextSibling(function() {                     return (function() { return { style: { backgroundColor: color } } })()                 }) })()) || '');__.push('<span class="color-box" ></span>      ');__.push(((function() { return ko.templateRewriting.applyMemoizedBindingsToNextSibling(function() {                     return (function() { return { text: color, '_ko_property_writers' : { text : function(__ko_value) { color = __ko_value; } }  } })()                 }) })()) || '');__.push('<span ></span>      ');__.push(((function() { return ko.templateRewriting.applyMemoizedBindingsToNextSibling(function() {                     return (function() { return { click: deleteColor, '_ko_property_writers' : { click : function(__ko_value) { deleteColor = __ko_value; } }  } })()                 }) })()) || '');__.push('<a href="#" >Delete</a>  </li>');}return __;});

Crazy looking? Yes, but better than making the web browser produce it every time!