JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <span class="span2">
     <label for="Manufacturer">Manufacturer:</label>
     <select id="Manufacturer" data-bind="options: Manufacturers,
                                optionsText: 'Name',
                                value: SelectedManufacturer,
                                optionsCaption: 'Select Manufacturer'" class="span12">
     </select>
</span>
 <span class="span2">
     <label for="Class">Class:</label>
     <select id="Class" data-bind="options: VehicleClasses,
                                optionsText: 'Name',
                                value: SelectedVehicleClass,
                                optionsCaption: 'Select Class'" class="span12">
                            </select>
                        </span>
 <span class="span2">
     <label for="Model">Model:</label>
     <select id="Model" data-bind="enable: SelectedManufacturer,
                                options: Models,
                                optionsText: 'Name',
                                value: SelectedModel,
                                optionsCaption: 'Select Model" class="span12">
     </select>
</span>

<script id="serverModel" type="application/json">
    {
        "GetModelsUrl": "/ISAUK/AssetData/VehicleData/GetModels",
            "GetVariantsUrl": "/ISAUK/AssetData/VehicleData/GetVariants",
            "GetModelYearUrl": "/ISAUK/AssetData/VehicleData/GetVehicleVariantModelYear",
            "Model": {
            "Manufacturers": [{
                "Id": 8,
                    "Name": "Abarth",
                    "VehicleManufacturerCode": "AB",
                    "EndDate": null
            }, {
                "Id": 10,
                    "Name": "Alfa Romeo",
                    "VehicleManufacturerCode": "AL",
                    "EndDate": null
            }, {
                "Id": 1,
                    "Name": "Audi",
                    "VehicleManufacturerCode":...

JavaScript

(function() {

  window.isa = window.isa || {};

  isa.uk = isa.uk || {};

}).call(this);

(function () {
    isa.uk.AssetData = (function () {
        var self = this;

        function AssetData(getModelsUrl, getVariantsUrl, getModelYearUrl) {
            self.getModelsUrl = getModelsUrl;
            self.getVariantsUrl = getVariantsUrl;
            self.getModelYearUrl = getModelYearUrl;
        }

        AssetData.prototype.getModels = function (manufacturerId, callback) {
            return $.getJSON(self.getModelsUrl, {
                "manufacturerId": manufacturerId
            }, function (data) {
                callback(data);
            });
        };


        return AssetData;
    })();

}).call(this);

(function () {
    isa.uk.VehicleSelectorViewModel = (function () {

        function VehicleSelectorViewModel(serverData, isaUkAssetData) {

            var that = this;
            ko.mapping.fromJS(serverData, {}, that);

            that.ModelYear = ko.observable();
            that.isVariantUnlockedForEditing = ko.observable(false);

            that.SelectedManufacturer.subscribe(function (manufacturer) {
                if (manufacturer) {
                    isaUkAssetData.getModels(manufacturer.Id(), that.Models);
                } else {
                    that.Models([]);
                    that.Variants([]);
                }
            });
        };

        return VehicleSelectorViewModel;

    })();

})();



(function () {

    $(document).ready(function () {

        var serverModel = JSON.parse($("#serverModel").html());
        var isaUkAssetData = new isa.uk.AssetData(serverModel.GetModelsUrl, serverModel.GetVariantsUrl, serverModel.GetModelYearUrl);
        var viewModel = new isa.uk.VehicleSelectorViewModel(serverModel.Model, isaUkAssetData);

        ko.applyBindings(viewModel);

    });

})();