JSFiddle - React, Tailwind, and code Playground

by Thomas Jackson

HTML

<div width="100%" data-bind="foreach: mainArray">
    Position: <span width="25%" data-bind="text: SlotPosition"></span><br>
    TypeId: <span width="25%" data-bind="text: OurTypeId"></span><br> 
    Type: <span width="25%" data-bind="text: OurType"></span><br><br>
<select data-bind="options: $root.slots, optionsValue: 'Value', optionsText: 'Text', value: $data.SlotPosition"></select>
    <select data-bind="options: $root.ourTypes, optionsValue: 'ID', optionsText: 'Name', value: $data.OurTypeId"></select><br>
    _________________________________<br><br>
</div>

JavaScript

var dataList = [        
    { SlotPosition: "1", OurTypeId: 4 },
    { SlotPosition: "2", OurTypeId: 2 },
    { SlotPosition: "3", OurTypeId: 3 }
];
var ourTypes = [
    { ID:"1", Name:"None", Limit:0 },
    { ID:"2", Name:"Fruits", Limit:5 },
    { ID:"3", Name:"Vegetables", Limit:5 },
    { ID:"4", Name:"Meats", Limit:2 }
];
var slots = [
        { Text: "1", Value: "1" },
        { Text: "2", Value: "2" },
        { Text: "3", Value: "3" }
    ];

var myViewModel = new MyViewModel(dataList);
ko.applyBindings(myViewModel);

function MyViewModel(dataList) {
    var self = this;
    self.slots = slots;
    //self.slots = [{ Text: "3", Value: "3" }];
    
 /*   self.slots = ko.computed(function() {  
        var limit = ko.utils.arrayFirst(ourTypes, function(type) {
            return type.ID == MyDataViewModel.OurTypeId();
        }).Limit;
        return [{ Text: "3", Value: "3" }];
    });*/
  /*  
       // alert(vm.SlotPosition);
        var limit = ko.utils.arrayFirst(ourTypes, function(type) {
            return type.ID == self.OurTypeId();
        }).Limit;
        alert(limit);
        var arrSlots = [];
        arrSlots.length = 0;
        arrSlots.push({Text:"",Value:""});
        
        for (var i=1; i < limit+1; i++) {
           // if (i == vm.SlotPosition)
           //     arrSlots.push({Text:i, Value:i, Selected: true});
           // else
                arrSlots.push({Text:i, Value:i});
        }
alert(arrSlots);
        return arrSlots;
    });*/
    self.ourTypes = ourTypes;
    self.mainArray = ko.observableArray([]);
    self.ActiveSlotList = ko.observableArray([0]);
        
    if (dataList.length > 0) {
        for (var i=0; i<dataList.length; i++) {
            var myDataViewModel = new MyDataViewModel(dataList[i]);
            //alert(myDataViewModel.OurType);
            self.mainArray.push(myDataViewModel);
        } 
    }
}

function MyDataViewModel(vm) {
    //alert(vm.SlotPosition);
    var self = this;
    if (vm != null) {   ...