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);


  self.limparECarregarDados = function(receivedData) //estou recebendo os itens , então receivedData é um array 
    {

      //carrega dados recursivamente

      if (receivedData != null) {

        for (var i = 0; i < receivedData.length; i++) {

          var Filho = new MeuModelo(receivedData[i].name);
          Filho.limparECarregarDados(receivedData[i].items);
          self.items.push(Filho);
        }

      }
    }
}

$(function() {

  //pre carregando dados:

  var data = {
    items: [{
      "name": "MORPHED",
      "items": [{
        "name": "5 Day",
        "items": [{
          "CategoryId": 20,
          "name": "30 day countdown"
        }, {
          "CategoryId": 19,
          "name": "Staffing your program"
        }, {
          "CategoryId": 22,
          "name": "Emergency/Medical Information"
        }, {
          "CategoryId": 18,
          "name": "Promoting your program"
        }, {
          "CategoryId": 21,
          "name": "Week of camp"
        }]
      }, {
        "name": "4 Day",
        "items": []
      }, {
        "name": "1/2 Day",
        "items": []
      }, {
        "name": "Age Targeted",
        "items": []
      }]
    }, {
      "name": "CREATE",
      "items": [{
        "name": "5 Day",
        "items": []
      }, {
        "name": "4 Day",
        "items": []
      }, {
        "name": "1/2 Day",
        "items": []
      }]
    }, {
      "name": "INNOVATE",
      "items": [{
        "name": "5 Day",
        "items": []
      }, {
        "name": "4 Day",
        "items": []
      }, {
        "name": "1/2 Day",
        "items": []
    ...