JSFiddle - React, Tailwind, and code Playground

by coverbeck

HTML

<ul>
<!-- ko foreach: {data: cities, as: 'city'} -->
    <li><input data-bind="value: city.name"/><span data-bind="text: city.name"></span><a data-bind="click: $parent.remove"> Remove me</a></li>
    <ul>
    <!-- ko foreach: neighborhoods -->
        <li><input data-bind="value: city.neighborhoods()[$index()]"/><span data-bind="text: $data"></span></li>
    <!-- /ko -->
    </ul>
<!-- /ko -->
</ul>
<a data-bind="click: add">Add</a>

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(['Hells Kitchen', 'Times Square'])};

var cities = ko.observableArray([sf, ny]);
var viewModel = {
    cities: cities,
    remove: function(city) {
        cities.remove(city)
    },
    add: function() {
        cities.push("Whatev")
    },
    removeNeighborhood: function(neighborhood) {
    }
}
ko.applyBindings(viewModel);