JSFiddle - React, Tailwind, and code Playground

by thewiseguy99

HTML

<div data-bind="template: { name: 'template', foreach: model}"></div>
 
<script type="text/html" id="template">
    <p>
        <span data-bind="text: Key"></span>
        <span data-bind="text: UserId"></span>
        <span data-bind="text: Name"></span>
    </p>
    <p><textarea data-bind="text: this"/></p>
    <!-- textarea should contain : {"Key": "...","UserId": "...","Name": "..."} -->
</script>

JavaScript

function MyViewModel() {
    this.model = [{
        "Key": "c1243328-4796-46c0-bb32-017d5a1ebdd4",
        "UserId": "02ad61b1-d416-46d4-98ac-d5f6c2b7d104",
        "Name": "\"old.txt\""},
    {
        "Key": "265c23ea-2d2a-459e-9f51-32837e058d01",
        "UserId": "02ad61b1-d416-46d4-98ac-d5f6c2b7d104",
        "Name": "\"sample.dwg\""}];
};

ko.applyBindings(new MyViewModel());