JSFiddle - React, Tailwind, and code Playground

by adiga

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button data-bind='click: RemoveChild'>Remove Child </button>
<button data-bind='click: AddChild'>Add Child </button>
<div data-bind="foreach: Parents()">
  <hr />
  <table>
    <tr>
      <td>
        <b>Father: </b>
        <div data-bind="text: Father"></div>
      </td>
      <td>
        <b>Mother: </b>
        <div data-bind="text: Mother"></div>
      </td>
    </tr>
    <tr>
      <td>
        <ul data-bind="foreach: Children">
          <li data-bind="text: Name"></li>
        </ul>
      </td>
    </tr>
  </table>
</div>

CSS

.name-container {
  padding: 5px;
  margin: 2px;
  background-color: #cacaca;
  border: 1px solid #888;
  border-radius: 5px;
}

.name-container span {
  margin: 5px;
}

body {
  font-family: arial, sans-serif;
  font-size: 13px;
}

JavaScript

var vm = function() {
  var self = this;
  self.Parents = ko.observableArray([{
    Father: 'Father-A',
    Mother: 'Mother-A',
    Children: ko.observableArray([{
      Name: 'Child-A1'
    }, {
      Name: 'Child-A2'
    }, {
      Name: 'Child-A3'
    }])
  }]);

  self.RemoveChild = function() {
    self.Parents()[0].Children.pop();
  }

  self.AddChild = function() {
    self.Parents()[0].Children.push({
      Name: 'Child-A' + (self.Parents()[0].Children().length + 1)
    })
  }

  ko.computed(function() {
    alert("Children Array changed");
    return ko.toJS(self.Parents());
  });
}


ko.applyBindings(new vm());