JSFiddle - React, Tailwind, and code Playground

by Nicolas Lips

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<div data-bind="myBinding: { states: states }">
    <ul data-bind="foreach: { data: items, as: 'item' }">
        <p>state: <span data-bind="text: item.state"/></p>
		<ul data-bind="foreach: statesList">
            <li>
                <label>
                    <input type="radio" data-bind="checked: item.state, checkedValue: key" />
                    <span data-bind="text: label"/>
                </label>
            </li>
        </ul>        
    </ul>
</div>

JavaScript

var viewModel = {
    items:[
        {state:ko.observable(1)},
        {state:ko.observable(3)},
        {state:ko.observable(2)}
	],
    states:{
        "1": "option1",
        "2": "option2",
        "3": "option3"
    }
};

ko.bindingHandlers.myBinding = {
	init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var innerBindingContext = bindingContext.extend(function () {
            var config = valueAccessor();
            config.statesList = [];
            for (var state in config.states) {
                config.statesList.push({
                    key: parseInt(state, 10),
                    label: config.states[state]
                });
            }
            return config;        
        });
        ko.applyBindingsToDescendants(innerBindingContext, element);
        return { controlsDescendantBindings: true };
    },
	update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    }
};

/*
		<ul data-bind="foreach: statesList">
            <li>
                <label>
                    <input type="radio" data-bind="checked: item.state, checkedValue: key" />
                    <span data-bind="text: label"/>
                </label>
            </li>
        </ul>
*/

$(document).ready(function () {
	ko.applyBindings(viewModel);
});