JSFiddle - React, Tailwind, and code Playground

by Thor Arne Johansen

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div data-bind="foreach: schedule"> <strong data-bind="text:day"></strong>

    <div data-bind="foreach:options">
        <label> <span data-bind="text: period"></span>  <span data-bind="text: time"></span>

            <input type="radio" data-bind="checked: selected, click: $root.selectedTime.bind($data, $parent.day), attr: {name: $parent.day}" />
        </label>
        <br />
    </div>
    <hr/>
</div>
<hr/>
<div data-bind="foreach: schedule">
    <label data-bind="text: day"></label>: <span data-bind="foreach: options">
        <label> <span data-bind="text: selected"></span> 
    </label>
    </span>
    <br/>
</div>

JavaScript

function WeekModel() {
    var self = this;

    self.selectedTime = function (day, period) {

        // Find the day
        ko.utils.arrayForEach(self.schedule(), function (scheduleDay) {

            if (scheduleDay.day() == day()) {
                ko.utils.arrayForEach(scheduleDay.options(), function (schedulePeriod) {
                    if (schedulePeriod.period() == period.period() && schedulePeriod.time() == period.time()) {
                        schedulePeriod.selected("on");
                    } else {
                        schedulePeriod.selected("off");
                    }
                });
            }
        });
        return true;
    };


    this.schedule = ko.mapping.fromJS([{
        day: "Mandag",
        options: [{
            period: "Formiddag",
            time: "Ingen transport",
            selected: "on"
        }, {
            period: "Formiddag",
            selected: "off",
            time: "SFO"
        }, {
            period: "Formiddag",
            time: "Skole",
            selected: "off"
        }]
    }, {
        day: "Tirsdag",
        options: [{
            period: "Formiddag",
            time: "Ingen transport",
            selected: "off"
        }, {
            period: "Formiddag",
            selected: "on",
            time: "SFO"
        }, {
            period: "Formiddag",
            time: "Skole",
            selected: "off"
        }]
    }, {
        day: "Onsdag",
        options: [{
            period: "Formiddag",
            time: "Ingen transport",
            selected: "off"
        }, {
            period: "Formiddag",
            time: "Skole",
            selected: "on"
        }]
    }]);
}

var vm = new WeekModel();
ko.applyBindings(vm);