ko.handlebars.js template enigne

handlebars.tmpl.html

<script type="text/x-handlebars-template" id="tree-layout-group">
    <li>
        <div class="tree-row tree-row-header" data-bind="click: $root.toggleTreeNode">
            <div class="tree-row-left">
                <hgroup>
                    <h2><i class="{{groupIconClass}}"></i>{{name}}</h2>
                    <h3>({{serverCount}})</h3>
                </hgroup>
            </div>
            <div class="tree-row-right">
                <a href="{{detailsUrl}}" title="View Group Details"><i class="icon-circle-arrow-right icon-faded goto-icon"></i></a>
            </div>
        </div>
        {{#if groupShouldExapnd}}
        <ol class="tree-subgroup">
            <!--ko template: { name: 'tree-layout-group', foreach: groups} --><!--/ko -->
            {{#servers}}
            <li>
                <div class="{{serverRowClass}}">
                    <div class="tree-row-left">
                        <h2>
                            <i class="{{statusIconClass}}" title="{{statusIconTitle}}"></i>
                            {{#if canNavigateToDetails}}
                            <a href="{{detailsUrl}}" title="View Server Details">{{name}}</a>
                            {{else}}
                            <span>{{name}}</span>
                            {{/if}}
                        </h2>
                        {{#unless isInQueuedState}}
                            {{#if shouldShowStats}}
                            <span class="cpuCount">{{{cpuCountDisplay}}}</span>
                            <div class="{{{cpuUsageDisplayClass}}}">
                                <div class="bar" style="width: {{cpuUsage}}%">{{cpuUsageDisplay}}</div>
                            </div>
                            <span class="memoryCount">{{{memoryCountDisplay}}}</span>
                            <div class="{{memoryUsageDisplayClass}}">
                                <div class="bar" style="width: {{memoryUsage}}%">{{memoryUsageDisplay}}</div>
                            </div>
                            {{/if}}
                            <span class="{{storageDisplayClass}}">{{{storageDisplay}}}</span>
                        {{/unless}}
                    </div>
                    <div class="tree-row-right">
                        {{#if canNavigateToDetails}}
                            <a href="{{detailsUrl}}" title="View Server Details"><i class="{{navigateToIconClass}}"></i></a>
                        {{/if}}
                    </div>
                </div>
            </li>
            {{/servers}}
        </ol>
        {{/if}}
    </li>
</script>

ko.handlebars.js

ko.handlebarsTemplateEngine = function () { }
ko.handlebarsTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
    templates: {},
    renderTemplateSource: function (templateSource, bindingContext, options) {
        var data = bindingContext.$data,
            templateId = templateSource.domElement.id,
            templateText = templateSource.text(),
            compiledTemplate = this.templates[templateId];

        // only compile the template once on the client
        if (compiledTemplate == null) {
            compiledTemplate = Handlebars.compile(templateText);
            this.templates[templateId] = compiledTemplate;
        }

        return ko.utils.parseHtmlFragment(compiledTemplate(data));
    },
    allowTemplateRewriting: false
});