JSFiddle - React, Tailwind, and code Playground

by nonsense66

HTML

<script id="treeElement" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'treeElement', foreach: children }">
        </ul>
     </li>
</script>    

 <ul data-bind="template: { name: 'treeElement', foreach: $data.treeRoot }"></ul>

JavaScript

var viewModel = {
    treeRoot: ko.observableArray()
};

var TreeElement = function(name, children) {
   var self = this;
   self.children = ko.observableArray(children);
   self.name = ko.observable(name);
}

var tree = [
    new TreeElement("Russia", [
        new TreeElement("Moscow")
    ]),
    new TreeElement("Germany"),
    new TreeElement("United States", 
        [ 
            new TreeElement("Atlanta"),
            new TreeElement("New York", [ 
                new TreeElement("Harlem"),
                new TreeElement("Central Park")
            ]) 
        ]),
    new TreeElement("Canada", [
        new TreeElement("Toronto")
    ])
];

viewModel.treeRoot(tree);

ko.applyBindings(viewModel);