JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="entry-container">
    <!-- ko foreach: Entries, afterRender: EntryAdded -->
    <div class="entry" data-bind="attr: { id: Id }, dynhtml: ProcessedContent"></div>
    <!-- /ko -->
</div>

CSS

#entry-container
{
    display: block;
    width: 300px;
    height: 300px;
    border: 1px solid #F00;
    padding: 5px;
    overflow: scroll;
}

.entry 
{
    display: block;
    height: 25px;
    border: 1px solid #000;
    margin-bottom: 10px;
}

JavaScript

if (!ko.bindingHandlers['dynhtml']) {
    ko.bindingHandlers['dynhtml'] = {
        'init': function() {
            return { 'controlsDescendantBindings': true };
        },
        'update': function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            ko.utils.setHtml(element, valueAccessor());
            ko.applyBindingsToDescendants(bindingContext, element);
        }
    };
}

function SomeViewModel()
{
    this.Entries = ko.observableArray(); 

    this.EntryAdded = function(domItems, data) {
        ko.applyBindings(data, domItems);  
    };
};

function SomeModelWithDynamicHtml()
{
    this.Id = ko.observable();
    this.ProcessedContent = ko.observable('<span class=\"entry-content\" data-bind=\"text: \'Some Dynamic Content\'\">Some Static Content</span>');
};

var viewModel = new SomeViewModel();
var uniqueId = 1;
var addNewDynamicEntry = function() {
    var newDynamicHtmlModel = new SomeModelWithDynamicHtml();
    newDynamicHtmlModel.Id(uniqueId++);
    viewModel.Entries.push(newDynamicHtmlModel);
};

setInterval(addNewDynamicEntry, 5000);

ko.applyBindings(viewModel);