JSFiddle - React, Tailwind, and code Playground

by coverbeck

HTML

<body>
    <ul>
<!-- ko foreach: {data: cities, as: 'city'} -->
    <li><input data-bind="value: city.name"/><span data-bind="text: city.name"></span></li>
    <ul>
    <!-- ko foreach: {data: neighborhoods, as: 'neighborhood'} -->
        <li><input data-bind="value: neighborhood"/><span data-bind="text: neighborhood"></span></li>
    <!-- /ko -->
    </ul>
<!-- /ko -->
</ul>
</body>

CSS

a {
    color: blue;
}

JavaScript

var sf = {name: ko.observable('San Francisco'), neighborhoods: ko.observableArray([ko.observable('Haight'), ko.observable('Bayview'), ko.observable('Marina')])};
var ny = {name: ko.observable('New York'), neighborhoods: ko.observableArray([ko.observable('Hells Kitchen'), ko.observable('Times Square')])};

var cities = ko.observableArray([sf, ny]);
var viewModel = {
    cities: cities,
}
ko.applyBindings(viewModel);