JSFiddle - React, Tailwind, and code Playground

by anup1986

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<head>
    <meta name="viewport" content="width=device-width" />
</head>
<label>Customers</label>    
<select id="customerDropList" data-bind="options: customers, value: selectedCustomer, optionsText: 'FtgNamn'"></select>
<br/>
<label>Projects</label>
    <select id="projectDropList" data-bind="options: selectedProjects, value: selectedProject, optionsText: 'ProjDescr'"></select>
<br/>
<label>Activities</label>
    <select id="activityDropList" data-bind="options: selectedActivities, value: selectedActivity, optionsText: 'EventNote'"></select>

JavaScript

function Customer(data) {
    this.FtgNr = ko.observable(data.FtgNr);
    this.FtgNamn = ko.observable(data.FtgNamn);
};

function Project(data) {
    this.FtgNr = ko.observable(data.FtgNr);
    this.ProjCode = ko.observable(data.ProjCode);
    this.ProjDescr = ko.observable(data.ProjDescr);
};

function Activity(data) {
    this.ProjCode = ko.observable(data.ProjCode);
    this.StrDateTime = ko.observable(data.StrDateTime);
    this.EventNote = ko.observable(data.EventNote);
};

function ViewModel() {
    var self = this;
    
    self.customers = ko.observableArray([]);
    self.projects = ko.observableArray([]);
    self.activities = ko.observableArray([]);

    self.selectedCustomer = ko.observable("");
    self.selectedProject = ko.observable("");
    self.selectedActivity = ko.observable("");
    
    self.customers = getCustomers(function (allCustomers) {
            var mappedCustomers = $.map(allCustomers, function (item) { return new Customer(item); });
            self.customers(mappedCustomers);
        });

    self.projects = getProjects(function (allProjects) {
            var mappedProjects = $.map(allProjects, function (item) { return new Project(item); });
            self.projects(mappedProjects);
        });
    
    self.activities = getActivities(function (allActivities) {
            var mappedActivities = $.map(allActivities, function (item) { return new Activity(item); });
            self.projects(mappedActivities);
    });
    
    self.selectedProjects = ko.dependentObservable(function () {
        var customer = this.selectedCustomer(), ftgNr;
        if (customer) {
            ftgNr = customer.FtgNr;
            return ko.utils.arrayFilter(self.projects, function (project) {
                return project.FtgNr == ftgNr;
            });
        }
        return [];
    }, self);
    
            self.selectedActivities = ko.dependentObservable(function () {
            var project = this.selectedProject(), projCode;
            if...