JSFiddle - React, Tailwind, and code Playground

by kyrisu

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
<div class="item" id="subjectList" data-bind="template: { name = 'subjectTemplate', foreach: sFiltered }">
</div>

JavaScript

var data = [
    {
    "Id": 1,
    "ParentId": 1,
    "Name": "Item1",
    "Selected": false},
{
    "Id": 2,
    "ParentId": 1,
    "Name": "Item2",
    "Selected": false},
{
    "Id": 3,
    "ParentId": 1,
    "Name": "Item3",
    "Selected": false},
{
    "Id": 4,
    "ParentId": 2,
    "Name": "Item1",
    "Selected": false},
{
    "Id": 5,
    "ParentId": 2,
    "Name": "Item2",
    "Selected": false},
{
    "Id": 6,
    "ParentId": 3,
    "Name": "Item3",
    "Selected": false},
{
    "Id": 7,
    "ParentId": 5,
    "Name": "Item1",
    "Selected": false},
{
    "Id": 8,
    "ParentId": 5,
    "Name": "Item2",
    "Selected": false},
{
    "Id": 9,
    "ParentId": 5,
    "Name": "Item3",
    "Selected": false}];


vm = {
    filtered: ko.observableArray();
}

    ko.applyBindings(vm);