JSFiddle - React, Tailwind, and code Playground

by Asle Gundersby

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
 
<select data-bind='options: Projects, optionsText: "name", optionsCaption: "Select Project...", value: selectedProject'></select>
<div data-bind='if: selectedProject'>
    <fieldset>
        <legend data-bind='text: selectedProject().name'></legend>
        <div> 
        <table>
            <tr>
                <td>
            <select data-bind='options: Textbatches, optionsText: "name", value: selectedText'></select>
                </td>
                 
                <td data-bind='if: selectedText'>You have selected Textbatch <span data-bind='text: selectedText().id'></span></td>

            </tr>
            <tr>
                <td/>
                <td data-bind='if: selectedText'>
                    Siblings
                    <ul data-bind="foreach: parentIDFilteredTextbatches">
                        <li data-bind='text: name'></li>
                    </ul>
                </td>
            </tr>
            </table>
        </div>
    </fieldset>
</div>

JavaScript

var Textbatch = function (data) {

    return data;
}

Project = function (data) {
    var self = this;
    self.id = ko.observable(data.id)
    self.name = ko.observable(data.name)
    return self;
}

ViewModel = function (model) {
    var self = this;

    self.selectedProject = ko.observable();
    self.selectedText = ko.observable();
    self.Textbatches = ko.observableArray();


    self.Projects = ko.observableArray(
    ko.utils.arrayMap(model, function (item) {
        return new Project(item);
    }));


    self.selectedProject.subscribe(function (project) {

        new Request.JSONP({
            url: 'http://jsfiddle.net/echo/jsonp/',

            data: {
                obj: '[{"id": "tb10", "name": "Text Batch 1.0", "parentId": "id_1"},' +
                      '{"id": "tb11", "name": "Text Batch 1.1", "parentId": "id_1"},'+
                      '{ "id": "tb20", "name": "Text Batch 2.0", "parentId": "id_2"},' +
                      '{"id": "tb21", "name": "Text Batch 2.1", "parentId": "id_2"}' +
                    ']'
            },
            onSuccess: function (response) {

                var data = ko.mapping.fromJSON(response.obj)
                 
                var mappedTextbatches = $.map(data(), function (item) {
                     
                    return new Textbatch(item);
                });

                
                self.Textbatches(mappedTextbatches);
            }
        }).send();

    })

    self.parentIDFilteredTextbatches = ko.computed(function () {

         
        var textbatch = self.selectedText();
         
        return textbatch ? ko.utils.arrayFilter(self.Textbatches(), function (item) {
                      
            return item.parentId() === textbatch.parentId() && !(item.id() === textbatch.id());  
        }) : [];
    });
}


ko.applyBindings(new ViewModel([{
    id: "id_1",
    name: 'A special Project'
}, {
    id: "id_2",
    name: 'A normal Project'
}]))