JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<script type="text/html" id="message">
    <p> 
        <span data-bind="text: content"></span>
        (replies to: <span data-bind="text: reply_to"></span>)        
    </p>
    <ul data-bind="foreach: replies">
        <li>
            <div data-bind="template: { name: message, foreach: replies }"></div>
        </li>
    </ul>
</script>
<div data-bind="template: { name: 'message', data: $root }"></div>

JavaScript

var DiscussionPost = function (content, reply_to, replies) {
    var self = this;
    self.content = content;
    self.reply_to = reply_to;
    self.replies = ko.observableArray(
    ko.utils.arrayMap(replies, function (reply) {
        return new DiscussionPost(reply.content, reply.reply_to, reply.replies);
    }));
};

var replies = [];

var rootModel = new DiscussionPost("Root message", -1, replies);

ko.applyBindings(rootModel);