JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div data-bind="foreach: feedbacks.sports">


  <p style="background-color:red;color:white;" data-bind="text: SportHeading, click: toggle"></p>

  <div data-bind="foreach: tournaments">
    <!-- f1 -->


    <a href="#" style="background-color:blue;color:white" data-bind="text: tourname"></a>


    <div data-bind="foreach: liveevents">
      <p class="event" data-bind="text: levent"></p>
    </div>



  </div>
  <!-- f1 -->
</div>

JavaScript

var jsonData = {
  "sports": [{
    "sportid": 1,
    "sportname": "soccer",
    "expanded": false,
		"tournaments": [{
      "tourname": "england - premier league",
      "liveevents": [{
        "levent": "chelsea vs burnley"
      }]
    }, {
      "tourname": "england - championship",
      "liveevents": [{
        "levent": "aston villa vs millwall"
      }, {
        "levent": "blackburn vs bolton"
      }, {
        "levent": "derby county vs qpr"
      }]
    }]
  }, {
    "sportid": 2,
    "sportname": "basket",
    "expanded": false,
    "tournaments": [{
      "tourname": "england - premier league",
      "liveevents": [{
        "levent": "chelsea vs burnley"
      }]
    }, {
      "tourname": "england - championship",
      "liveevents": [{
        "levent": "aston villa vs millwall"
      }, {
        "levent": "blackburn vs bolton"
      }, {
        "levent": "derby county vs qpr"
      }]
    }]
  }]
};


$(document).ready(function() {


  function Container() {
    var instance = this;

    instance.FeedbackViewModel = function(data) {
      var instance = this;

      var mappingOptions = {
        'sports': {
          create: function(options) {
            return (new(function() {
              this.EmployeeHeading = ko.computed(function() {
                return "Sport: " + this.sportname();
              }, this);
              this.toggle = function(data){
              		this.expanded(!this.expanded());
              }.bind(this);
              this.SportHeading = ko.computed(function(){
              	return this.sportname() + this.expanded() ? ' (Expanded)' : '';
              }, this);

              ko.mapping.fromJS(options.data, {}, this);
            })());
          },
          'tournaments': {
            create: function(options) {
              return new instance.tournamentsModel(options.data);
            }
          }
        }
      };

      instance.feedbacks = ko.mapping.fromJS(data, mappingOptions, instance);
   ...