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>
<ul data-bind="foreach: fodata()[0]">
    <li data-bind="text: Name"></li>
</ul>
<br/>
SELECTED: 
<span data-bind="text: ko.toJSON(selected)"></span>
<br/>

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 = {
    odata: ko.mapping.fromJS(data),
    selected: ko.observable(),
    fodata: ko.observableArray([ko.observableArray(), ko.observableArray()]),
    level: ko.observable(),
}

    ko.applyBindings(vm);


ko.observableArray.fn.pushAll = function (valuesToPush) {
    var underlyingArray = this();
    this.valueWillMutate();
    for (var i = 0, j = valuesToPush().length; i < j; i++) {
        underlyingArray.push(valuesToPush()[i]);
    }
    this.valueHasMutated();
    return this;
};