JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.2/knockout.mapping.min.js"></script>
<ul data-bind="foreach: parts">
    <li>
        <p data-bind="text: manufacturers" />
        <p data-bind="text: manufacturer"/>
    </li>
</ul>

JavaScript

function Item(id, name) {
    this.id = id;
    this.name = ko.observable(name);
}

function Part(name, manufacturerId,parent){
    this.manufacturers = name;
    this.manufacturerId = manufacturerId;
    this.manufacturer = ko.computed(function () { return parent.getManufacturer(manufacturerId); });
} 
var stringStartsWith = function (string, startsWith) {          
    string = string || "";
    if (startsWith.length > string.length)
        return false;
    return string.substring(0, startsWith.length) === startsWith;
};

function ViewModel(items) {
    var self = this;
    self.items = ko.observableArray(items); 
    
    self.getManufacturer = function(manId) {    
                    return ko.utils.arrayFirst(self.items(), function(item) {                  
                        return stringStartsWith(""+item.id,""+manId);
                    }).name();
                };
    
    self.parts = ko.observableArray([new Part("Computer", 1,self), new Part("Fast Computer", 2,self), new Part("Router", 3,self)]);
                  
}

ko.applyBindings(new ViewModel([new Item(1, "Dell"), new Item(2, "HP"), new Item(3, "Cisco")]));