JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://olado.github.io/doT/doT.min.js"></script>
<script id="ko-dot" type="text/html">
    {{~ it.items() :item }}
    <div>
        <span>{{=item.name()}}</span>, 
        <span>{{=item.age()}}</span><br>
        <ul>
            {{~ item.likes() :like }}
            <li>{{= like}}</li>
            {{~}}
        </ul>
    </div>
    {{~}}
</script>
    
    <div id="dot-test">
        <h2>doT</h2>
        <div class="messages" data-bind="template:'ko-dot'"></div>
    </div>

JavaScript

ko.dotTemplateEngine = function () { }
ko.dotTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
    templates: {},
    renderTemplateSource: function (templateSource, bindingContext, options) {
        var data = bindingContext.$data,
            templateId = options,
            templateText = templateSource.text(),
            compiledTemplate = this.templates[templateId];
        
        // only compile the template once on the client
        if (compiledTemplate == null) {
            compiledTemplate = doT.template(templateText);
            this.templates[templateId] = compiledTemplate;
        }
        
        return ko.utils.parseHtmlFragment(compiledTemplate(data));
    },
    allowTemplateRewriting: false
});

var dotNode = document.getElementById('dot-test');
var dotTemplateEngine = new ko.dotTemplateEngine();

var data = (function (n) {
    var data = [],
        i;
    for (i = 0; i < n; i++) {
        data.push({
            name: ko.observable('Greg'),
            age: ko.observable(i),
            likes: ko.observableArray(['movies', 'reading'])
        });
    }
    return data;
}(10));

var viewmodel = {
    items: ko.observableArray(data)
};

ko.setTemplateEngine(dotTemplateEngine);
ko.applyBindings(viewmodel, dotNode);
viewmodel.items()[0].name("Foo");