JSFiddle - React, Tailwind, and code Playground

by maybe_vp

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<div data-bind="foreach: items">
    <div>
        <span data-bind="text: Name"></span> (Id <span data-bind="text: Id"></span>)
        <select data-bind="options: $parent.options, optionsText: 'Name', value: SelectedOption"></select>
        Selected: <span data-bind="text: SelectedOption().Id"></span>
    </div>
</div>

JavaScript

function model(options, items) {
    self = this;
    self.options = options;  
    self.items = ko.mapping.fromJS(items);
    
    ko.utils.arrayForEach(self.items(), function(item) {
        item.SelectedOption = ko.observable(
            ko.utils.arrayFirst(self.options, function(option) { return option.Id == item.SelectedOption.Id(); })
        );
    });
}

// Fake data
opts = [ 
    { Id: 1, Name: "Option 1" },
    { Id: 2, Name: "Option 2" },
    { Id: 3, Name: "Option 3" }
];

var items = [
    { Id: 1, Name: "Item 1", SelectedOption: { Id: 1, Name: "Option 1" } },
    { Id: 2, Name: "Item 2", SelectedOption: { Id: 2, Name: "Option 2" } },
    { Id: 3, Name: "Item 3", SelectedOption: { Id: 3, Name: "Option 3" } }
];

var viewModel = new model(opts, items);

ko.applyBindings(viewModel);
console.log(viewModel.items())