JSFiddle - React, Tailwind, and code Playground

by claykaboom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="template: {name: 'template_raiz', with: $data}"></div>


<script type="text/html" id="template_raiz">

  <span data-bind="text:name"></span> (<span data-bind="text:qtdFilhos"></span>)
  <button data-bind="click:$data.adicionar">Adicionar filho</button>

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



</script>


<script type="text/html" id="template_de_itens">

  <li>
    <input type="text" data-bind="value:$data.name" />
    <span data-bind="text:$data.name"></span>(<span data-bind="text:$data.qtdFilhos"></span>)
    <button data-bind="click:$data.adicionar">Adicionar filho</button>
    <button data-bind="click:$parent.removerFilho">Eliminar</button>

    <ul data-bind=" template: {name: 'template_de_itens', foreach: $data.items} ">
    </ul>
  </li>
</script>

JavaScript

function MeuModelo(texto, pai) {
  var self = this;
  self.items = ko.observableArray([]);
  self.name = ko.observable(texto);
  self.adicionar = function() {

    self.items.push(new MeuModelo("novo item"))

  };

  self.removerFilho = function() {
    self.items.remove(this); 

  };

  self.qtdFilhos = ko.computed(function() {
    return self.items().length;
  }, self);
}

$(function() {

  ko.applyBindings(new MeuModelo("raiz"));

});