JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<h2>People</h2>
<ul data-bind="foreach: people">
<li>
    <div>
        <span data-bind="text: name"> </span> has <span data-bind='text: children().length'>&nbsp;</span> children:    
    </div>
    <ul data-bind="foreach: {data: children, as: 'child'}">
        <li>
            <span data-bind="text: child.name"> </span> 
              <span data-bind="text: child.age"> </span> 
              <span data-bind="text: child.weight"> </span> 
        </li>
    </ul>
</li>

JavaScript

var Person = function(name, children) {
this.name = name;
this.children = ko.observableArray(children);

    var Child = function(){
    }
    
this.addChild = function() {
    this.children.push("New child");
}.bind(this);
 }

var viewModel = {
people: [
    new Person("Annabelle", [{name:"Arnie", age: 1, weight: 2}, {name:"Anders", age: 3, weight: 4}, {name:"Apple", age: 5, weight: 6}]),     ],
};

ko.applyBindings(viewModel);