JSFiddle - React, Tailwind, and code Playground

by mrrodd

HTML

<select data-bind='options: people, optionsText: "description", value: selectedPerson'></select><br/>
<dl>
    <dt>Selected person</dt>
    <dt>Name</dt>
    <dd><input data-bind='value: selectedPerson().name, valueUpdate: "afterkeydown"'/></dd>
    <dt>Street Address</dt>
    <dd><input data-bind='value: selectedPerson().address.streetAddress, valueUpdate: "afterkeydown"'/></dd>
</dl>

JavaScript

var person = function(name, streetAddress) {
    this.name = ko.observable(name);
    this.address = {  
        streetAddress: ko.observable(streetAddress) 
    }
    this.description = ko.dependentObservable(function() {
        return this.name() + ' at ' + this.address.streetAddress();    
    }, this); 
};

var viewModel = {
    people: [
        new person('Fred', 'High Street'),
        new person('Jim', 'Smith Street')
    ],
    selectedPerson: ko.observable()
};

ko.applyBindings(viewModel);