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>
-- data1 --
<ul data-bind="with: data1">
<li data-bind="text: FirstName"></li>
<ul style="margin-left: 10px" data-bind="foreach: Customers">
    <li data-bind="text: Id"></li>
    <li data-bind="text: Name"></li>
</ul>
    <li><button data-bind="click: $parent.setData2">setData2</button></li>
</ul>
-- data2 --
<ul data-bind="with: data2" >
<li data-bind="text: FirstName"></li>
<ul style="margin-left: 10px" data-bind="foreach: Customers">
    <li data-bind="text: Id"></li>
    <li data-bind="text: Name"></li>
</ul>
</ul>

JavaScript

var data = {
    "Id": 9,
    "FirstName": "RADOSLAW",
    "LastName": "KOWALSKI",
    "MotherMaidenName": "PRZYKALDOWY",
    "Pesel": "81062816862",
    "Customers": [{
        "Id": "23",
        "Name": "Company Name",
        "Selected": false}],
    "BirthPlace": "Szczecin",
    "BirthDate": "10/10/1949 12:00:00 AM",
    "Memo": null,
    "Email": "[email protected]",
    "Gender": "M",
    "Phones": [{
        "Type": "Telefon stacjonarny",
        "Number": "75675674"}]
};

vm = {
    data1: ko.mapping.fromJS(data),
    data2: ko.observable(),
};

vm.setData2 = function() {
    vm.data2(this);
}

ko.applyBindings(vm);