JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<div data-bind="foreach:{data: testCases, as: 'currentCase'}"> 
    <span data-bind="text: currentCase.id"></span>

    <select data-bind="options: $root.categories, optionsText: 'text', optionsValue: 'id', value: currentCase.category.id"></select>
    <br/>
</div>

CSS

http://jsfiddle.net/user/login/

JavaScript

var category = function (id, text) {
    return {
        id: id,
        text: text
    }
}

var categoryInstance = new category(2, "two")

var testCase = function (id, categoryObj) {
    return {
        id: id,
        category: categoryObj,
        selectedOption: ko.observable() }
}

var vm = {
    categories: [new category(1, "one"), categoryInstance],
    testCases: [new testCase("case 1", new category(1, "one")),
                new testCase("case 2: same object", categoryInstance),
                new testCase("case 3: different object", new category(2, "two") )           ] 
}


ko.applyBindings(vm)