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>
<select data-bind="options: Projects, optionsCaption: 'Choose...', optionsText: 'title',value: selectedProject"> </select>

<select data-bind="options: Textbatches, optionsCaption: 'Choose...', optionsText: 'title',value: selectedText"> </select>

JavaScript

var Textbatch = function (data) {
    var self = this;
    self.textbatchID = data.textbatchID;
    self.parentID = data.parentID;
    self.projectID = data.projectID;
    self.title = ko.observable(data.title);
};

Project = function (data) {
    var self = this;
    self.projectID = data.projectID;
    self.title = ko.observable(data.title);
};

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) {

        // ...some code... */
        if (project.projectID === 1) {
            new Request.JSONP({
                url: 'http://jsfiddle.net/echo/jsonp/',
                data: {
                    textbatchID: '10',
                    projectID: '2',
                    parentID: '2',
                    title:  'text no. 2'                
                },
                onSuccess: function (response) {
                   
                    var mappedTextbatches = $.map(response, function (item) {
                      return new Textbatch(item);
                    });
                 
                    console.log("Update text batches");
                    self.Textbatches(mappedTextbatches);
                    self.selectedText(self.Textbatches()[0]);
                }
            }).send(); 
        }
        else if (project.projectID === 2) {
            new Request.JSONP({
                url: 'http://jsfiddle.net/echo/jsonp/',
                data: {
                    textbatchID: '10',
                    projectID: '2',
                    parentID: '2',
                    title:  'text no. 2'                
                },
                onSuccess: function (response) {
                   
                    var...